'Active' event triggers when resource is downloaded, but sometimes before it is applied in the CSS

[OliverJAsh]

I have a simple function that console logs the height of the document element when the Web font has loaded, using the 'active' event.

active: function () { console.log(document.height); }

Now, the height of the document changes as the Web fonts are loaded. I need to capture the height of the document with the Web fonts once they have loaded. However, very rarely I notice the active event triggers before the fonts have been applied to the document, which means I get an incorrect height. To test this, I added a setTimeout to my active event:

active: function () {
    console.log(document.height); 
    setTimeout(function () { console.log(document.height); }, 1000);
}

Most of the time I will get two identical heights appear in my console, for example 500 and 500. However, if I clear the cache and refresh the page (using Safari, hold shift and press the reload button), sometimes these heights are different. For example, 450 versus 500. This must mean that the 450 height is actually the height of the document before the fonts are applied in the CSS, despite the fact that the active event is being triggered.

Like I say, this only occurs very rarely, and it happens more often when the page is loaded with a clear cache. With a clear cache, this happens for about 1/20 refreshes.

And, it's driving me crazy!

[seanami]

This is a known issue in some webkit browsers (especially Safari). Those browsers first changes the metrics of the font when it begins to load the font, instead of when the font has actually finished loading and is rendering.

Unfortunately, there's not a great workaround for this right now that doesn't come with its own set of tradeoffs. We're going to need to change our method of font watching in order to get around this behavior. Perhaps using canvas in order to detect pixel data or comparing to a tiny pre-made web font that we unpack from the JS itself.

[bramstein]

We think we have a viable solution for this problem, which is described in more detail in #66. These changes will be merged in and released soon.