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

Question

I have a DIV and it rotates:

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

Ok but when i add

 -webkit-backface-visibility: hidden; 

He cleans these white dots.

Any ideas? - thanks!

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

Answer 1

You already know well that the dots are caused by the -webkit-backface-visibility property. This is similar to a bug in Chrome v26- , which, as noted in NOX, seems to be fixed in v27 (just checked it myself, the problem is still present in v27 on Windows 7).

A 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 , which does no harm.

Here is a JSFiddle example of this, where I made the background of the header and footer black so that it is easier to see that there are no more points.

---

As a side note, you should always prefix the provider with 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);