Chrome - Repaint all your text as a temporarily bugfix

on Tuesday 25 March 2014
This bug in Chrome ( i'm using Chromium as it's more stable on Ubuntu, however this bug has also been seen by me personally on OSX running Chrome ) has been plaguing me lately. It has to do with the font not rendering. What I've found so far is that it only seems to happen whenever the font, or more specifically in my case; Google font, is being loaded under the header response "304 Not modified". Whenever the fonts get loaded under "200 Ok" everything goes fine. Now, I've got no material so far to back this up, but I'm not the only one having this problem.

The appearent fix was that you could refresh using the URL, by clicking in the urlbar and pressing enter the page would load this fine or hovering over the element that contained the unrendered text to trigger a render.

After a bit of searching i found the following snippet ( that i modified to work, and absolutely work in my situation as the snippet I found wasn't working in my case but i guess i'm just saying it wasn't me coming up with this brilliant solution. ) as whenever you would resize the window the font also seemed to be triggered to render correctly, that was one of the methods I was using often in the last couple of days to get my text to render.

// Chrome fix for repainting text
$('body').css('padding-left', '1px').promise().done(function() {
     setTimeout(function() {
          $('body').css('padding-left', '0px');
     }, 10);
});

I need to mention that the snippet above is wrapped in document.ready(). It's a bit overkill to do a promise on css, however, I need this to work everytime without any failure and this is only a temporal bugfix; or at least. That's what I'm assuming as more people in similar situations are having the same results as sought their answer in either CSS or Javascript to fix it.

I've measured the performance before and after the fix, to me, the results were neglactable and not worth mentioning in this post. I still had pages that loaded around a solid 200-400ms so that little snippet didn't worry me in the least.

0 comments:

Post a Comment