Font Pixelate Issue in Chrome (HTML5/CSS3)

Question

I have a issue that text is pixelated when 2D scale of CSS transform is applied. (I only tested in Chrome. I'll do cross-browsing later, so you don't need to test it on different browsers.)

CSS

.versus_block_hover
{
    -webkit-transform: scale(1.2,1.2)!important; 
    -webkit-transition: 50ms 0ms!important; 
    z-index:1100!important;
    border-width:1px;
    border-color:#000;
    border-style:solid;
}

Javascript Code

$('.versus_block').hover(function() {
   $(this).addClass('versus_block_hover');
   $(this).parent().css('z-index','1100');
}, function() {
   $(this).removeClass('versus_block_hover');
   $(this).parent().css('z-index','0');
});

I know that Chrome uses bitmap operation during CSS transform for 3D acceleration. However, when I tested it in jsfiddle, it wasn't pixelated. In face, it seems that Chrome re-draws a text when the transition is done.

See this working example. Hover over a box. (I put all CSS elements from my actual site.)

http://jsfiddle.net/eCkdE/11/

And, this is an actual site that has an issue. (Hover any of blocks, then you can see pixelated fonts when it's expanded)

http://jsfiddle.net/GJ7BM

Anyone has an idea how to fix it? It's okay that you can fix it on my jsfiddle directly.

Answer 1

The problem seems similar to this: http://code.google.com/p/chromium/issues/detail?id=119470

So what actually triggers the problem, is when the element is rendered as a comsposited layer on uneven coordinates. If you enable the Composited render layer borders option in chrome://flags you can see that in your first jsfiddle example the div becomes a composited layer while the transition is in progress, the text becomes blurry, once the transition is complete it's no longer composited, and the text becomes clear (see this modified fiddle where it's easier to spot the border: http://jsfiddle.net/kF2Q5/).

In your second jsfiddle example the text stays blurry even after the transition is complete because it's still an composited layer (on uneven coordinates presumably), this is caused by these lots of nested and underlayed transforms (an element that lies above a composited layer, becomes a composited layer too). See this modified fiddle: http://jsfiddle.net/PqPSU/ All transforms are being disabled using:

* {
    -webkit-transform: translateX(0) !important;
}

So only the transform on the hovered element is left. If you have enabled the Composited render layer borders option, you should see that all the red/brown borders around the tiles, indicating composited layers should be gone. And you should see that the text becomes clear once the transition is complete, just like in your first example.

Unfortunately I have no solution for the underlying problem, ie the blurry rendering of composited layers, I guess it's something that cannot be solved on this end, but can only be fixed in the rendering engine and/or the graphics card driver, depending on where exactly the problem is caused.