CSS3属性webkit-overflow-scrolling:touch ERROR

Question

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

当我们在开发中的网站上实施它确实有效但不是很好.我相信可能存在CSS问题因此我在这里问.

以下小提琴将向您展示它的完美运作

如果您在开发中弹出我们的网站,您会在设施选项卡下找到相同的面板,但在iOS上虽然滚动是完美的,溢出的部分不会显示图片文字切成两半.

Answer 1

正如@relluf指出的那样,在相对元素上应用3D过渡可以修复bug.然而,我进一步调查它似乎应用也-webkit-transform: translateZ(0px)工作(这是谷歌在gmaps地图容器上做的)并且它不需要在相对定位的元素上,只是可滚动元素的直接后代.

因此,如果您不想手动保留需要修复的所有位置的列表,您可能会这样做:

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

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

我觉得`element>*`有点儿.虽然它修复了剪辑问题,但滚动时滚动元素会闪烁.我通过对所有元素应用硬件加速来修复闪烁:`element*`(没有直接子选择器). (4认同)
这根本不是一个好的解决方案,因为它会为浏览器创建更多的渲染层,并且可以在GPU上进行更多的层组合工作!移动设备具有较低的GPU内存,并且不能很好地支持这一点.见http://aerotwist.com/blog/on-translate3d-and-layer-creation-hacks/ (3认同)
这个解决方案非常糟糕.一个非常低效的选择器,它将产生大量的GPU渲染层. (3认同)

Answer 2

他们放松了什么？尝试了所有方法,直到我最终找到了元素在-webkit-overflow-scrolling:touchdiv中正确呈现所需的唯一属性: position: static

相对和绝对定位的元素总是在边界上被切除,并且在它之外完全缺失(除了空的空间).如果动态更改position属性,从static更改为absolute,则只有可滚动div视口的可见部分才会保持渲染,无论偏移恰好在哪里.

Answer 3

我也遇到过这个bug.我通过将以下css应用于父元素来修复它:

-webkit-transform: translate3d(0, 0, 0);

但是,我注意到,当触摸的输入元素滚动到视图的中心时(通过Safari/iOS),这会降低渲染速度并可能选择其他输入元素.