【问题标题】：Enable GPU accelerated div scrolling启用 GPU 加速的 div 滚动
【发布时间】：2020-08-29 22:56:51
【问题描述】：
我正在尝试使幻灯片动画在低功耗设备上运行更流畅。通过使用 css 变换和过渡，我可以轻松地使类似的动画顺利运行（60 FPS）。我相信在这种情况下它是硬件加速的，因为在动画期间几乎没有占用 CPU。
但是，我要优化的效果使用内置滚动，通过将div 设置为overflow-x: scroll，并将多个图像彼此相邻放置在div 中。然后它使用滚动捕捉来创建一种轮播。当我滚动它时，CPU 接近 100% 占用，而且有点滞后。有没有办法让内置滚动更流畅或硬件加速（就像动画一样）？我知道在移动设备上肯定是这样，但这是在桌面（电子/铬）上。这个codepen有一个example of the effect。
我尝试将tranform: translateZ(0) 应用于容器或容器中的元素，希望它会强制它们位于 GPU 层上，但没有明显效果。
【问题讨论】：
标签：
html
css
google-chrome
electron
【解决方案1】：
这应该可以解决问题，尤其是在 ipad 和 chrome 上使用backface-visibility
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);