html - Css -webkit-backface-visibility で、回転した div に白い点が表示される

Question

私はDIVを持っており、それは次のようにローテーションされます:

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

そこはいいのですが、追加すると

-webkit-backface-visibility: hidden;

それはこれらの白い点を示しています..

何か案は？- ありがとう！

デモ: http://jsfiddle.net/X5WKM/

Answer 1

ドットがプロパティによって引き起こされていることはすでに十分に認識してい-webkit-backface-visibilityます。これは Chrome v26 のバグのようです。NOXがコメントしたように、v27 で修正されたようです(自分で確認したところ、問題は Windows 7 の v27 にまだ存在しています)。

これを簡単に修正するには、以下を置き換える必要があります。

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

と：

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

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

これは単にあなたのand要素-webkit-backface-visibilityからプロパティを削除するだけです- これは害を及ぼすようには見えません。#top#foo

これは、ヘッダーとフッターの背景を黒くして、ドットがまったくなくなったことを簡単に確認できるJSFiddle の例です。

---

補足として、実際の CSS プロパティの前に常にベンダー プレフィックスを配置する必要があります。-ms-transformandの-webkit-transform 後 に置く代わりに、transformそれらを前に置く必要があります。

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