启用GPU加速div滚动

Question

我正在尝试让幻灯片动画在低功耗的设备上运行得更流畅。通过使用css变换和变换，我可以很容易地让类似的动画流畅地运行(60FPS)。我相信在这种情况下它是硬件加速的，因为在动画过程中CPU几乎没有被占用。

然而，我想要优化的效果使用了内置的滚动，通过将div设置为overflow-x: scroll，并在div中将多个图像放在一起。然后，它使用滚动捕捉来创建一种旋转木马。当我滚动这个时，CPU几乎100%被占用，并且它有点慢。有没有办法让内置的滚动更流畅，或者让硬件加速(就像动画一样)？我知道在手机上肯定是这样的，但这是在桌面上(电子/ Chrome)。这个codepen有一个example of the effect。

我尝试将tranform: translateZ(0)应用于容器或容器中的元素，希望它能迫使它们位于GPU层上，但没有明显的效果。

Answer 1

这应该可以解决这个问题，特别是在backface-visibility的ipad和chrome上。

backface-visibility: hidden;
perspective: 1000;

-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;

-moz-backface-visibility: hidden;
-moz-perspective: 1000;

-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);