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

时间:2011-11-13 08:51:46

标签: ios ipad webkit ios5 mobile-webkit

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

最初的实施是使用

webkit-overflow-scrolling: auto;

然而我将此更新为......

webkit-overflow-scrolling: touch

..启用触摸滚动的动作/惯性。

这个问题是导航中包含的列表项在滚动时完全消失,只有在动量停止后才会返回。

这方面的一个例子可以是seen here

6 个答案:

答案 0 :(得分:16)

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

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

答案 1 :(得分:7)

我们将其追踪到具有位置的元素:relative或position:absolute。删除它们后,滚动时会显示项目。

答案 2 :(得分:6)

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

-webkit-transform: translateZ(0);

确实应该强制渲染。诀窍是将它放在溢出容器内的每个未渲染元素上。 在我的例子中,它是包含在带有def

的div中的无序图像列表
-webkit-overflow-scrolling: touch;

我将上面的“转换”定义放在包裹图像的li标签上,它立即解决了问题。 希望这会有所帮助...

答案 3 :(得分:2)

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

有user1012566建议它与滚动内部元素的position属性有关(静态工作,没有别的办法),虽然我对此有不同的结果。

另一位用户表示他们已经在bugreport.apple.com网站上报告过,但报告的错误在那里并不公开,所以我们其他人不可能看到官方回复(如果有的话)或跟踪进度。

答案 4 :(得分:2)

iFrames的这个错误似乎更糟。 我创建了一个JSFIDDLE来演示它(使用iOS 5.0.1设备打开http://jsfiddle.net/KMayN/9/)并向Apple发送了一个错误报告。 非常好奇:如果你滚动,你会看到一个空白(未渲染)的内容......但如果你再缩放,内容就会出现!等等... 如果他们回复我,我会告诉你最新的。 我尝试了所有东西(带/不带div容器的可滚动iFrame,带/不带滚动的容器等等),根本就没有办法:我们必须等待Apple修复错误。

答案 5 :(得分:0)

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