CSS3属性webkit-overflow-scrolling：触摸错误

一尘不染

CSS3属性webkit-overflow-scrolling：触摸错误

css

iOS 5向Web设计人员发布了一个新属性-webkit-overflow-crolling:touch，该属性使用iOS设备硬件加速器为可滚动div提供本机滚动。

当在开发中在我们的网站上实施时，它确实有效，但效果不佳。我相信可能存在CSS问题，因此请在这里提出。

以下小提琴将向您展示它的工作原理

如果您跳到开发中的我们网站，您会在设施选项卡下找到相同的面板，但在iOS上，尽管滚动完美，但未显示溢出的部分，而将照片切成两半。

阅读 277

2020-05-16

共1个答案

一尘不染

正如@relluf指出的那样，在相对元素上应用3D过渡会修复该错误。但是，我对其进行了进一步的研究，似乎应用程序-webkit-transform: translateZ(0px)也可行（这是Google在gmaps地图容器上所做的事情），并且它不必位于相对定位的元素上，而只需位于可滚动元素的直接后代即可。

因此，如果您不想手动保存需要修复的所有位置的列表，则可以这样做：

element {
    -webkit-overflow-scrolling: touch;
}

element > * {
    -webkit-transform: translateZ(0px);
}

2020-05-16