Create-react-app: [Docs] Infinite network requests loop in Safari and iOS

[dcastil]

Describe the bug

When I try to access https://create-react-app.dev with Safari, the browser gets stuck in an infinite loop, trying to load following SVG:

data:image/svg+xml;utf8,<svg fill="currentColor" alt="Search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="16px" width="16px"><path d="M6.02945,10.20327a4.17382,4.17382,0,1,1,4.17382-4.17382A4.15609,4.15609,0,0,1,6.02945,10.20327Zm9.69195,4.2199L10.8989,9.59979A5.88021,5.88021,0,0,0,12.058,6.02856,6.00467,6.00467,0,1,0,9.59979,10.8989l4.82338,4.82338a.89729.89729,0,0,0,1.29912,0,.89749.89749,0,0,0-.00087-1.29909Z" /></svg>

The computer runs pretty hot just after a few seconds.

Did you try recovering your dependencies?

Not applicable

Which terms did you search for in User Guide?

Not applicable

Environment

  System:
    OS: macOS 10.15.2
    CPU: (8) x64 Intel(R) Core(TM) i7-8559U CPU @ 2.70GHz
  Binaries:
    Node: 12.14.1 - /usr/local/bin/node
    Yarn: 1.21.1 - /usr/local/bin/yarn
    npm: 6.13.6 - /usr/local/bin/npm
  Browsers:
    Chrome: 79.0.3945.130
    Firefox: 71.0
    Safari: 13.0.4
  npmPackages:
    react: Not Found
    react-dom: Not Found
    react-scripts: Not Found
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

1. Grab a Mac
2. Open Safari
3. Navigate to https://create-react-app.dev
4. Open network tab in Safari devtools

Expected behavior

Just one request made for the SVG.

Actual behavior

Here is a screenshot after being on the website for ca. 30 seconds. Note that over 25k requests were fired.

Reproducible demo

https://create-react-app.dev

[dcastil]

I loaded the website on an iPhone as well and the phone gets hot as well. iOS forces all browsers to use Apple's WebKit engine which means that it's currently not possible to load the docs on an iPhone without draining the phone battery. 😔

It's most likely an issue with @docusaurus/[email protected] or @docusaurus/[email protected].

[ianschmitz]

cc @yangshun. Any thoughts? Have you seen reports of this from your end?

[yangshun]

I've experienced CPU issues using Safari on websites which use CSS variables and that's about it. I believe that's a Safari bug.

I haven't seen the SVG loading issue mentioned here though. Unable to repro the SVG loading issues as well on Safari Version 13.0.3 (15608.3.10.1.4) but the high CPU usage issue is still there. Likely a Docusaurus core issue, not CRA.

[dcastil]

Hmm that's strange. I had the same SVG issue on my private MacBook and my work MacBook. Just now I was able to reproduce it on an iOS simulator.

create-react-app-bug.mov.zip

[yangshun]

So we had another report of high CPU in Safari and after some tracing, it's due to the use of transition: all within .navbar__search-input. Disabling those lines in the web inspector fixes the CPU issue. I suspect this also causes the search icon SVG to be re-downloaded in your version of Safari. Could you try disabling those lines and see if the network requests still happen?

This is a bug in Safari but we can try to prevent the bug from even surfacing.

[dcastil]

@yangshun I can confirm that disabling the 4 transition properties from your screenshot stops the SVG requests. 🙌

[yangshun]

Awesome! Thanks for helping to debug! We'll work on a fix.

[ianschmitz]

Thanks for the collab folks!

[yangshun]

[email protected] has been released which contains the fix.

[dcastil]

The website now works fine so I'm closing this. Thank you for the fix!