使用webkit-overflow-scrolling滚动时,iOS5图像消失:触摸

Question

我之前一直在使用iScroll插件,但是想要删除原生行为.

最初的实施正在使用

webkit-overflow-scrolling: auto;

不过我把它更新为......

webkit-overflow-scrolling: touch

..启用触摸滚动的运动/惯性.

这个问题是导航中包含的列表项在滚动时完全消失,并且只有在动量休息后才返回.

这里可以看到一个例子

Answer 1

我过去遇到过同样的问题,如果你需要使用定位元素尝试添加-webkit-transform: translateZ(0);元素或容器.此属性通常会强制浏览器使用硬件加速,并且使用额外的功能,您的图像很可能不会消失.无论如何它对我有用.

这里也有更多有用的东西:http://www.html5rocks.com/en/tutorials/speed/html5/

Answer 2

我们将其追踪到具有位置的元素:相对或位置:绝对.删除它们后,滚动时会显示项目.

Answer 3

像Mark Napthine所说,添加以下css定义:

-webkit-transform: translateZ(0);

应该强制渲染.诀窍是将它放在溢出容器内的每个未渲染元素上.在我的例子中,它是包含在带有def的div中的无序图像列表

-webkit-overflow-scrolling: touch;

我把上面的"变换"定义放在包裹图像的li标签上,它立即解决了问题.希望这可以帮助...

Answer 4

这是我也遇到过的错误 - 这个问题似乎与同一问题相关： CSS3 property webkit-overflow-scrolling:touch ERROR

user1012566 建议这与滚动内元素的位置属性有关（静态有效，没有其他作用），尽管我对此有不同的结果。

另一位用户表示，他们已在 bugreport.apple.com 网站上报告了该问题，但报告的错误并未在那里公开，因此我们其他人不可能看到官方回应（如果有）或跟踪进度。