css - 网络工具包 : CSS force hardware acceleration for 2D transforms without using 3D CSS properties

Question

在不使用 3D(例如 translateZ(0))的情况下，是否可以在 webkit 中使用 CSS 对 2D 转换强制硬件加速(根据 Are 2D transforms hardware accelerated in Mobile Safari?)。

我发现了 position: fixed 元素的问题，其中元素被设置为等同于 position: absolute 的东西，因此没有相对于视口(viewport)定位，相反，它最终相对于父容器定位(如本文 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 :

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

在真正的 CSS 中可以做这样的事情:

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

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

PS:3d 变换值是:

• translate3d(x, y, z)
• 翻译Z(z)
• scale3d(sx, sy, sz)
• 缩放Z(sz)
• 旋转X( Angular )
• 旋转Y( Angular )
• 旋转 3d(x, y, z, Angular ),
• 观点(p)
• 矩阵 3d(…)