Safari上的Jerky translation3d动画

Question

我在Safari上遇到一个奇怪的问题（在ma​​cOS和iOS上均如此）。我正在尝试在离子应用程序（使用Angular）中做一个底部抽屉，尽管在chrome上一切都非常流畅，但是拖动动画在safari上却非常生涩，并且在触摸事件之后有很多“滞后”。

经过一些调试后，问题似乎来自translate3d更新，因此我将代码简化为一个非常简单的函数，问题仍然存在。

setInterval(() => {
  const matrix = getComputedStyle(this.element.nativeElement).transform;
  const y = fromString(matrix).f;

  this.domController.write(() => this.renderer.setStyle(this.element.nativeElement, 'transform', `translate3d(0, ${ y - 10 }px, 0)`));
}, 1);

这也是翻译元素的CSS：

width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 100;
transform: translate3d(0, 0, 0);
will-change: transform;

以下是说明问题的视频（都在同一台计算机上运行：

Chrome：https://streamable.com/acj93

Safari：https://streamable.com/b4887

这里怎么了？

Answer 1

您可以尝试在浏览器上强制进行硬件加速，以使其看起来更平滑，闪烁更少。

width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 100;
transform: translate3d(0, 0, 0);
/* Add this */
-webkit-transform: translate3d(0, 0, 0,);
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;