Anti-aliasing not working in Chromium

I recently had to use the CSS3 property transform, in its « rotate » version. This property being currently supported by all modern browsers – but with vendor prefixes -, I thought it would be rendered the same anywhere.

It was not, not really.

In Chromium, -webkit-transform:rotate(4deg) on a container led to horribly aliased edges for this container. After some research, it appears that it was a WebKit engine bug, not solved for now. Tragedy! Horror! Pickles! Should my design be thrown away? No, don’t weep in sorrow: there is a way.

Others have the same problem:
http://stackoverflow.com/questions/5078186/webkit-transform-rotate-pixelated-images-in-chrome

And others know how to solve it:
http://stackoverflow.com/questions/6492027/css-transform-jagged-edges-in-chrome

The key is backface-visibility: http://dev.w3.org/csswg/css3-3d-transforms/#backface-visibility-property It’s linked to 3D effects, and I must admit I don’t know why it corrects aliasing. I’ll search a little more 😉

Laisser une réponse

Your email address will not be published. Required fields are marked *

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax