6

无论如何在不使用 3D 的情况下使用 webkit 中的 CSS 强制对 2D 变换进行硬件加速（例如translateZ(0)）（根据移动 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的方式类似。

4

2 回答 2

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（角度）
  • 旋转Y（角度）
  • 旋转3d（x，y，z，角度），
  • 透视(p)
  • 矩阵3d(…)
于 2012-07-16T16:50:26.817 回答
0

看起来设置backface-visibility: hidden可以解决问题。我已使用fps-counter仅针对 chrome 确认了这一点。

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

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

于 2014-02-18T13:58:50.687 回答