设置-webkit-perspective使ipad3屏幕模糊

Question

在iPad3上设置webkit透视图CSS属性会使子元素渲染非常模糊,如果它们用于非视网膜显示,则渲染图像.要明确我不是在谈论渲染模糊的图像,DOM子元素渲染模糊.

可以做些什么呢？

简单地删除属性不是一个选项,因为我使用需要在Z轴移动的动画.

属性在CSS中设置如下:

-webkit-perpective: 500;

感谢您的帮助!

Answer 1

不确定这是否有帮助，但是前端大神 David DeSandro 在这篇文章的“返回 Z 轴原点”部分提到了这类事情：

http://24ways.org/2010/intro-to-css-3d-transforms

为了保持 3-D 变换快速，Safari 会合成元素，然后应用变换。因此，文本的抗锯齿功能将保持应用转换之前的状态。当在 3D 空间中向前转换时，可能会出现明显的像素化......

...为了解决扭曲并恢复 #cube 的像素完美，我们可以将 3D 对象向后推，以便正面将定位回 Z 轴原点。

#cube { -webkit-transform: translateZ(-100px); }