construct-style-sheets icon indicating copy to clipboard operation
construct-style-sheets copied to clipboard

Published 20 hours ago • verified publisher icon calebdwilliams

FOUC in Firefox

Open jkissel opened this issue 3 years ago • 0 comments

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: https://github.com/calebdwilliams/construct-style-sheets/blob/e6c517754845ed32f42df10d456d521aeebebd52/src/ConstructedStyleSheet.ts#L129

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'.

jkissel avatar Apr 04 '22 08:04 jkissel