A couple blog posts ago, I wrote about how fonts sometimes look pixelated and distorted in Chrome. The developers at Orion Group have also noticed another issue with Chrome and text: sometimes, the text doesn’t load at all. Sometimes, hovering over where text should be, or refreshing the page, makes the text appear. Chrome developers are aware of the bug and you can track the progress of the issue here: https://code.google.com/p/chromium/issues/detail?id=336476 It sounds like they are getting closer to a fix so hopefully this will be resolved soon. But if you are a developer who needs a workaround now, here are some fixes.
To give you a little more detail, the text fails to load unless something else causes it to “repaint”, or reload. That’s why hovering over the text can fix the issue — if there is hover styling. Even if there are no style rules inside of a :hover selector, it will trick Chrome into thinking something has changed so it repaints the text. The way to force it into repainting the text by itself is to use either JavaScript or CSS to repaint the text itself after a short time.
Here are some examples for of ways other web developers have worked around the issue on their sites. Depending on your website, you may need to tweak these.
JavaScript:
$('body')
.delay(500)
.queue(
function(next){
$(this).css('padding-right', '1px');
}
);
CSS:
body,p,h1{
-webkit-animation-duration: 0.1s;
-webkit-animation-name: fontfix;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 0.1s;
}
@-webkit-keyframes fontfix{
from{ opacity: 1; }
to{ opacity: 1; }
}
If you know of any other ways to work around this issue, or have any updates as to when the issue is going to be fixed, please post a comment below.