Question

无论如何使用webkit中的CSS强制进行2D变换的硬件加速而不使用3D（例如translateZ(0)）（根据Are 2D transforms hardware accelerated in Mobile Safari?）。

我发现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：

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）
translateZ（z）的
scale3d（sx，sy，sz）
scaleZ（SZ）
rotateX（角）
旋转Y（角）
rotate3d（x，y，z，angle），
透视（p）的
的Matrix3D（...）

Answer 2

看起来设置backface-visibility: hidden就可以了。我使用fps-counter确认了这一点仅适用于Chrome。

.3d-accelerate {  
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

FPS计数器仅显示transition。添加translate: transform3d(0, 0, 0)时会显示。我还出现了backface-visibility。

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

2 个答案: