使用CSS3透視變換的IE10上的工件

Question

使用CSS transform屬性更改3D透視圖時，遇到Internet Explorer 10上的問題。

在應用了透視圖的元素中包含的某些元素的邊上會出現隨機假象。

我創建了一個簡單的小提琴來演示這個問題： http://jsfiddle.net/b9ztC/

要重現，只需打開小提琴，並嘗試選擇，單擊或玩弄文字，這導致以下工件出現/消失的段落元件周圍：

更多線和僞影出現在更復雜的情況，並且原因似乎是CSS的下面的行：

transform: perspective(800px); 

解決問題的唯一途徑似乎是：

• 未曾申請到元素
• 角度變換角度設置爲0px
• 使用perspective: 800px，而不是transform: perspective(800px)

最後一個似乎是一個簡單的解決方案，但它在某些情況下效果不好，下面的3D f （例如，在使用IE10的卡的背面具有相同的工件問題）在將透視屬性與旋轉變換分開應用時效果不佳：http://www.cssplay.co.uk/menu/css3-3d-card.html

有沒有人遇到過這個問題？有什麼辦法可以防止這種情況發生？

我也想知道這是否發生在每臺機器上，或者它可能是硬件相關的問題。

Answer 1

我看到或多或少相同的問題，雖然只在div的左側，它根據變換而變化。這似乎是通過線條邊緣流血的背景。

我在Windows 7 x64上使用Radeon HD 4670（Catalyst 13.1），使用IE 10.0.9200.16686（KB2870699）。

到目前爲止，我發現的唯一實用的解決方法是在內部元素上應用填充，即在p而不是在div上。但是我不確定填充是否實際上是觸發器，所以這可能不適用於其他情況。