Resolving anti-aliasing on WebKit hardware-accelerated elements
Activating hardware acceleration in WebKit with 3D CSS transforms changes the way WebKit renders text. WebKit composites the element so that when rendering the transform, it doesn’t have to re-render sub-pixel anti-aliasing for every frame. This feature is a good thing in that vastly improves performance of transitions and transforms in WebKit.
But this affects anti-aliasing when there is no actual transform and hardware-acceleration is active on a element. i.e. banal 3D transforms like translate3d( 0, 0, 0)
or scale3d( 1, 1, 1 )
.
The solution is the same one for IE’s opacity bug: add a matching background to the affected background.
View fiddle: resolving anti-aliasing with hardware acceleration.
Hover over the image below to see the comparison for TUAW.