Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

FOUC in Firefox #108

Open
jkissel opened this issue Apr 4, 2022 · 0 comments
Open

FOUC in Firefox #108

jkissel opened this issue Apr 4, 2022 · 0 comments

Comments

@jkissel
Copy link

jkissel commented Apr 4, 2022

Describe the bug
I get a FOUC in Firefox.

To Reproduce
My setup is basically this (only with more app around it): http://jsfiddle.net/6scbyupm/

When loading the page, the icon is gigantic, before the size from the stylesheet is applied.

This seems to be related to the requestAnimationFrame() here:

requestAnimationFrame(() => {

If I remove that, it seems to work fine. But since I assume there's a good reason why requestAnimationFrame() is used, I'm wondering how to avoid the FOUC without patching the polyfill.

Expected behavior

The icon has the proper size from the start.

Desktop (please complete the following information):

  • OS: Linux
  • Browser: Firefox
  • Version: 98.0.1

Additional context
In my production case, the CSSStyleSheet object is created using Wepack's css-loader with exportType='css-style-sheet'.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant