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:

And others know how to solve it:

The key is backface-visibility: 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](

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

Here is some inline `code`.

For more help see