Hi random Stackoverflow visitor- Thanks for reading my question!
Here is a minimal page that demonstrates my problem: http://lisperati.com/text_bug/text_bug.html
If you visit that page with Chrome/Chromium it will calculate the width of a div containing text, both immediately and after 1 second. On my machines I get two very different answers as to the width. Any chance you know the reason for why these two width calculations give different results?
My uneducated guess is that there is some weird delay in rendering font-face items, either because of the delay for loading the file or otherwise (Though my tests show evidence that this problem is not related to fetching the font file) As a rule, my understanding is that dynamic elements inserted into the DOM will be correctly laid out as soon as the insertion is complete and control is returned to the javascript code.
More important for me than understanding “why” this happens is to understand how to properly adjust for this issue. As you probably know, IMG elements have an “onload” event that can be used to find accurate dimensions of an image after it has been loaded. Is there some similar event that can be used for when a font-face element has been fully laid out, in order to adjust for this issue? Do you have any other advice for how to get an accurate width of an element styled with font-face without simply having an arbitrary 1 second delay?
Thanks so much for any tips on this glitch that’s holding up my work, fellow StackOverflow reader!
BTW- I asked a related question recently (http://stackoverflow.com/questions/4636079) but have narrowed down the issue much more, leading to this new, more specific question.
Have you tried
document.ready,window onload?Also if it’s related to refresh (F5) then it looks like a network issue, because a rendering issue would cause problems on every page load.