Webkit:CSS强制2D变换的硬件加速,而不使用3D CSS属性

Question

无论如何使用webkit中的CSS在不使用3D的情况下强制进行2D变换的硬件加速(例如translateZ(0))(根据在Mobile Safari中加速的2D变换硬件？).

我发现了position: fixed元素的问题,其中元素被设置为等价的东西position: absolute,因此没有相对于视口定位,而是最终相对于父容器定位(如本文中所述http://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms /).

我正在选择硬件加速,因为iOS中的转换背景往往会闪烁白色,就像这个错误概述https://github.com/jquery/jquery-mobile/issues/2856一样.

Answer 1

除了 2d 变换值之外，您还可以将 3d 变换值添加为 null ：

\n\n

el {\n    transform: 2DValue(val) 3DValueSetToNull(0);\n    transform: 2DValue(val);\n}\n

\n\n

在真正的 CSS 中可以做出类似这样的东西：

\n\n

div {\n    /* translateZ(0) will not interfere with the rotate value */\n    /* Also with -webkit-, -moz-, -o- */\n    transform: rotate(90deg) translateZ(0);\n    /* Compatibility for older (yep) browsers */\n    /* Also with -webkit-, -moz-, -ms-, -o- */\n    transform: rotate(90deg);\n}\n

\n\n

请务必使用不会干扰 2D 变换值的 3D 变换值。

\n\n

PS：3d 变换值为：

\n\n

\n
• 翻译 3d(x, y, z)
\n
• 平移Z(z)
\n
• 缩放3d（sx，sy，sz）
\n
• 比例Z(sz)
\n
• 旋转X（角度）
\n
• 旋转Y（角度）
\n
• 旋转3d（x，y，z，角度），
\n
• 观点(p)
\n
• 矩阵3d(\xe2\x80\xa6)
\n

\n