Css -webkit-backface-visibility shows white dots on rotated div

Question

I have a DIV and it is rotated by:

transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);

It's good there, but when I add

-webkit-backface-visibility: hidden;

It shos these white dots..

Any ideas? - thanks!

DEMO: http://jsfiddle.net/X5WKM/

Answer 1

You're already well aware that the dots are caused by the -webkit-backface-visibility property. This appears to be a bug in Chrome v26- which, as NOX commented, appears to have been fixed in v27 (just checked this myself, the issue is still present in v27 on Windows 7).

The simple quick fix for this involves replacing:

* {
    margin:0;
    padding:0;
    transform: translate3d(0,0,0);
}

With:

* {
    margin:0;
    padding:0;
    transform: translate3d(0,0,0);
}

#nav, #topp, #footer {
    -webkit-backface-visibility: hidden;
}

This simply removes the -webkit-backface-visibility property from your #top and #foo elements - which doesn't appear to cause any harm.

Here is a JSFiddle example of this where I've made the background of the header and footer black to make it easier to see that the dots are no longer there at all.

---

As a side note, you should always put vendor prefixes before the real CSS properties. Instead of putting -ms-transform and -webkit-transform after transform, you should put them before:

-ms-transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
transform: rotate(-5deg);