Laggy变换：在Android上翻译，在iOS上流畅

Question

我有一个可以左右拖动的卡片元素。执行此操作时，将设置transform: translate CSS属性。

这在iPhone 7上非常流畅，但在三星Galaxy S8上却很落后。考虑到这两款手机都是高端手机，我认为性能会很好。

我正在动画水平拖动“卡片”。然而，它在三星Galaxy S8上是滞后的，但在iPhone 7上非常流畅。为什么会这样？

这是实际执行的代码：

this.card.nativeElement.style.setProperty('transform', 'translate(' + translateX + 'px)');

Answer 1

在我移动的元素上应用以前未知的CSS属性will-change: transform;就可以了。