低帧率嵌套转换元素

Low frame-rate with nested transformed elements

本文关键字:元素 转换 嵌套 帧率      更新时间:2023-09-26

我有一个自定义的滚动视图实现。它的工作原理只是将滚动元素左右转换。

它在移动safari上提供了相当不错的帧率。问题是,一旦我转换了一些位于滚动条中的元素,帧率就会突然下降。

这是演示

如果你看它在chrome(与"模拟触摸事件"启用),一切都很顺利,除了最初的几个时刻,当它上传纹理到GPU。

但是在iOS6的iPad上,只要视图中没有被转换的元素,移动是流畅的。但是如果你向右滚动,我用scale3d()变换了一些元素,一切都变得混乱了。就像每一帧都重新上传纹理。

我只是把所有的

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

应该"强制硬件加速"。