Another Google Chrome CSS bug

Since I moved my blog from blogger I've noticed on many occasions that Chrome would screw up the text rendering on the first view of a page. Hit F5 to refresh and it goes away. For a long time I thought this was related to my use of web-fonts (the excellent Google Web Fonts, but in fact its simpler than that.

Eventually I took the time to look into it a bit more, and narrowed it down to the fact that I am using the text-rendering:optimizeLegibility css directive, which does make a nice difference to the kerning of the fixed-width fonts I'm using (Ubuntu Mono), but also has the apparent side-effect of setting negative margins on those fixed-width texts which make them run into/over surrounding text.

Once I'd figured out what was causing my problem a quick Google search showed I'm not alone. The chromium issue tracker has several relevant bug reports. I chose to add my tuppence to bug 96936

Examples of the bug

Here's what the problem looks like when text-rendering:optimizeLegibility is in use in Chrome 15 (and the as yet unreleased 16 beta):

And here (and also now in the blog you are reading) is how it looks without optimizeLegibility:

If you are reading this in Google Chrome you can check to see if the bug still exists by taking a look at the example text below, which is taken from the sample I submitted to bug 96936. If you see overlapping characters below, the bug is not fixed in your version of Chrome.

Note: Some interesting characteristics of the bug include:

1. Text renders correctly if you refresh the page after the initial visit
2. It appears much worse with certain fonts - fixed-width/monospace fonts in particular seem to suffer
3. The width of the text appears to be calculated incorrectly, not just margins - you can see this in the first screen-shot where the date tab cuts into the end of "2011".