1

使用 CSS 变换属性更改 3D 透视图时，我在 Internet Explorer 10 上遇到问题。

应用透视的元素中包含的某些元素的边缘出现随机伪影。

我创建了一个简单的小提琴来演示这个问题：http: //jsfiddle.net/b9ztC/

要重现，只需打开小提琴并尝试选择、单击或播放文本，这会导致段落元素周围出现/消失以下伪影：

IE10透视变换伪影

在更复杂的场景中会出现更多的行和伪影，原因似乎是下面这行 css：

transform: perspective(800px);

解决这个问题的唯一方法似乎是：

  • 不将透视应用于元素
  • 将变换透视设置为0px
  • 使用perspective: 800px, 而不是transform: perspective(800px)

最后一个似乎是一个简单的解决方案，但在某些情况下效果不佳，例如以下 3D 翻转卡片演示（使用 IE10 在卡片背面有相同的伪影问题）在应用时不能很好地播放与旋转变换分开的透视属性：http ://www.cssplay.co.uk/menu/css3-3d-card.html

有没有人遇到过这个问题？有什么办法可以防止这种情况发生吗？

我还想知道这是否发生在每台机器上，或者它可能是与硬件相关的问题。

4

1 回答 1

0

我看到或多或少相同的问题，虽然只在 div 的左侧，但它会根据变换而变化。它似乎是从线条边缘渗出的背景。

我在带有 Radeon HD 4670 (Catalyst 13.1) 的 Windows 7 x64 上，使用 IE 10.0.9200.16686 (KB2870699)。

到目前为止，我发现的唯一实用的解决方法是在内部元素上应用填充，即p在div. 但是我不确定填充是否真的是触发器，所以这可能不适用于其他情况。

于 2013-09-27T12:09:45.633 回答