I noticed some strange behavior in Firefox, as I was getting a FOUC when appending CSS by javascript. The problem is, Firefox reloads a webfont each time a CSS style is added dynamically with javascript. Although the reloaded file would normally be cached, it still creates a FOUC (flash of unstyled content).
Actually, the issue ONLY occurs when dynamically adding CSS to a document with font-family, or with a @media query. In both these cases, Firefox reloads the web font :(
Codepen demonstration: http://codepen.io/mjau-mjau/pen/XXgZbV?editors=101
As you can see in the image, the webfont is reloaded after applying CSS dynamically:
This only happens for Firefox. Anyone know why this is happening, or if there is an official bug tracker on this for Firefox?
