Overlap invisible part of the logo

Created by: ghost

Is this a bug report?

Yes

Did you try recovering your dependencies?

Not relevant.

Which terms did you search for in User Guide?

Logo, rotating, overlapping

Environment

Environment Info:

  System:
    OS: Windows 10
    CPU: x64 Intel(R) Core(TM) i7-6500U CPU @ 2.50GHz
  Binaries:
    npm: 6.6.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: 42.17134.1.0
    Internet Explorer: 11.0.17134.1
  npmPackages:
    react: ^16.7.0 => 16.7.0
    react-dom: ^16.7.0 => 16.7.0
    react-scripts: 2.1.3 => 2.1.3
  npmGlobalPackages:
    create-react-app: Not Found

This is a lie, I don't actually use IE or Edge. I am ashamed to admit I use Windows at home though.

Steps to Reproduce

Create a new react app using create-react-app npx create-react-app react-bug cd react-bug npm start
Add a button just below the logo component, add a little event to the button click, may I propose a counter? <button onClick={() => this.setState({counter: this.state.counter + 1})}>OMG Don't click me {this.state.counter} times </button>

And initialize some state: state = { counter : 0 } 3. Click the button, notice it doesn't always work. 4. Inspect the logo, and notice the invisible part of it rotating over your button. 5. Realize you were clicking the rotating logo

Expected Behavior

I suspect the easiest solution is to give the logo SVG image more convenient dimensions. Maybe an actual square?

Actual Behavior

Reproducible Demo

I was too ashamed to push this to a public repo. I read a bit too many articles about setState grouping and render cycles before realizing the logo overlap was the culprit. I know this is a silly bug report. We stumbled on this while introducing it to our teams, in a more complex example than I described here. Because some of us had used a bigger text component between the logo and the button counter, some of us didn't have the issue, which added to the confusion.