web-dev-qa-db-ja.com

Firefoxの3D CSS変換、ギザギザのエッジ

css変換、クロムのギザギザのエッジ 」と同様に、3D変換のFirefoxでも同じことが発生します。例: http://jsfiddle.net/78d8K/5/ (< -覚えておいてください:Firefox

今回、 backface-visibilityは役に立たない:(

何か案が?

62
abernier

編集済みの回答:(コメントの後)

「回避策」、透明outline属性を追加します。

outline: 1px solid transparent;

Firefox 10.0.2 Windows 7でテスト済み: http://jsfiddle.net/nKhr8/

enter image description here

元の答え:(背景色に依存)

「回避策」、border属性を同じ背景色(この場合は白)で追加します:

border: 1px solid white;

Firefox 10.0.2 Windows 7でテスト済み: http://jsfiddle.net/LPEfC/

enter image description here

148
Juan Mellado

アンチエイリアスされた境界線を防ぎたい場合

以下は私のためにうまくいった

border: 1px solid rgba(0, 0, 0, 0.1); 

境界線がはっきりと見える場合、これは完璧な解決策ではないかもしれませんが、@ Juanの答えに固執する方が良いでしょう。

以下は、回転するキューブのスクリーンショットです

enter image description here

4
Rafik Bari

outlineの使用とは別に、以下も機能します。

box-shadow: 0 0 0 1px transparent;
0