Skip to content

Latest commit

 

History

History
90 lines (65 loc) · 4.25 KB

README.md

File metadata and controls

90 lines (65 loc) · 4.25 KB

Font Cache Issue

A minimal reproducible example for the Chrome/Edge font cache issue.

Steps to reproduce (minimal):

Setup:

  1. git clone https://github.com/Maxim-Mazurok/font-cache-issue
  2. cd font-cache-issue
  3. nvm i on linux, or nvs auto (optional, but recommended, to use the same NodeJS version as me; see nvm and nvs)
  4. npm ci - ensure it completes without errors
  5. npm start (or set env var DEBUG to * for verbose server logs)

Reproduction:

  1. Open Chrome or Edge
  2. Open Incognito window (Ctrl+Shift+N) (alternatively, clear all cache)
  3. Go to http://localhost:3005/
  4. Wait to be redirected to /login.html
  5. Click on "click here" link
  6. Wait for "Heart icon should be here" message to appear
  7. If you see the Heart icon - close incognito window (or close tab and clear cache) and repeat the reproduction steps again

See demo video

Reproduction rate

  • Fast PC: 55/60 (~92% reproduction rate) (Dell Precision 5570 with i9-12900H and 64GB RAM, using "Ultra Performance" thermal mode and "Best performance" power mode)
  • Slowed down PC: 10/20 (50% reproduction rate) (Running y-crunch stress tests and, using "Quiet" thermal mode and "Best Power Efficiency" power mode)

OS and browser versions

Reproduced on Chrome and Edge, both on Mac and Windows. Doesn't reproduce on Firefox, Safari and for some weird reason on Chromium.

Reproduced:

  • Chrome
    • 109.0.5414.120 (Windows 11 Enterprise 23H2 (22631.3880))
    • 126.0.6478.127 (Windows 11 Enterprise 23H2 (22631.3880))
    • 127.0.6533.73 (Windows 11 Enterprise 23H2 (22631.3880))
    • 127.0.6533.89 (MacBook Air 2019 (A1932))
    • 127.0.6533.89 (Fresh install of Chrome on Windows 10 Enterprise Evaluation 1809 in Virtualbox)
  • Edge
    • 127.0.2651.74 (Windows 11 Enterprise 23H2 (22631.3880))

Not reproduced:

  • Chromium
    • 84.0.4147.0 (Windows 11 Enterprise 23H2 (22631.3880))
    • 127.0.6533.0 (Windows 11 Enterprise 23H2 (22631.3880))
    • Some 126.x, 127.x and 129.x versions (Windows 11 Enterprise 23H2 (22631.3880))
  • Firefox Developer Edition
    • 129.0b9 (Windows 11 Enterprise 23H2 (22631.3880))
  • Safari
    • 17.5 (19618.2.12.11.6) (MacBook Air 2019 (A1932))

Breakdown

  1. We open the main "App" page
  2. After a short delay, we check if user is logged in, and since they are not (based on local storage), we redirect them to the login page
  3. Just before the redirect, we show an icon element that is supposed to request a font file
  4. From server logs we can see that font file is requested and served at this point
  5. Now we are on the login page, and user is automatically logged in (by flipping a flag in the local storage).
  6. User clicks on the "click here" link, navigating back to the main "App" page
  7. After a short delay, we check if user is logged in, and since they are (based on local storage), we show the same icon element as before
  8. This time, the icon is not shown (only a rectangle that looks like White Square U+25A1 □), and the font file is not requested at all

My guess is that the browser thinks that file is cached because it already requested it before, but then it wasn't actually saved because of the page navigation, and so it probably thinks that file is cached while it isn't, and doesn't request it again, but also can't render the icon because the file was not actually saved. I think one could verify this by having more detailed server logs, or by inspecting network with WireShark, not sure.

Steps to reproduce (original, non-minimal):

  1. Open https://app.borderwise.com/ and make sure you're logged out
  2. Close all tabs, close Edge
  3. Open Edge
  4. Go to https://app.borderwise.com/
  5. Login
  6. Sometimes font-awesome icons won't be loaded

The issue usually stays when doing soft-reload. Hard reload fixes the issue.

One can see in DevTools when doing soft-reload that the font-awesome CSS is loaded, but the font files are not being requested at all, despite being referenced in the cached CSS.

Workaround

The workaround is to ask browser not to store cached CSS file that references the font file. See workaround.js for example. Issue reproduction rate using workaround - 0/50 (0%).