optimizeLegibility Harms Legibility with Chromium on Linux

I’ve heard from a number of people that the text rendering for this site was messed up when using Chromium on Linux. It looked like this:

Screen shot showing messed-up text rendering

I did some research, including installing the latest Ubuntu and Chromium in VMWare. I saw the bug too.

Eventually I found this bug on the Chromium bug tracker. Though the bug is specific about bold fonts and Microsoft fonts, it sounds to me as if the issue was with a line in my CSS: text-rendering: optimizeLegibility.

So I removed that line from the CSS for this site. I added a little JavaScript in the page header to check for Chromium — and, if not Chromium, then it does document.body.style.textRendering = "optimizeLegibility"; to set the style. (I still need to do a comparison to make sure it’s working correctly. I’m not even a novice when it comes to JavaScript.)

I have a few theories as to why the bug is not more widely-noticed:

  1. It may be that few sites use optimizeLegibility so far.

  2. The display would fix itself if you refreshed the page. My guess is that a redraw/reflow would fix the bug, and most sites have something — an image, script, iframe, something — that would trigger at least one redraw or reflow, and so the bug was largely hidden. But this site is simple enough that it wouldn’t hide the bug.

  3. It may be that the bug appears only with certain fonts.

Obviously, some combination of the above is possible. (Or something else I haven’t thought of.)

My point: if you use optimizeLegibility on your site, it’s a good idea to test with Chromium on Linux.

28 Nov 2011

Archive