FOUC in Firefox

[jkissel]

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:

construct-style-sheets/src/ConstructedStyleSheet.ts

Line 129 in e6c5177

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