iOS5使用webkit-overflow-scrolling: touch滚动时图像消失



我以前一直在使用iScroll插件,但想放弃它的原生行为。

最初的实现是使用

webkit-overflow-scrolling: auto;

但是我把它更新为…

webkit-overflow-scrolling: touch

. .

在触摸卷轴上启用运动/惯性。

这样做的问题是,导航栏中的列表项在滚动时完全消失,只有在势头停止时才会返回。

我在过去有过同样的问题,如果你需要使用定位元素尝试添加-webkit-transform: translateZ(0);到元素或容器。这个属性通常迫使浏览器使用硬件加速,有了额外的功能,你的图像很可能不会消失。反正对我很管用。

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

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

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

-webkit-transform: translateZ(0);

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

-webkit-overflow-scrolling: touch;

我把上面的"transform"定义放在li标签上,它立即解决了这个问题。

这是我也遇到过的一个bug -这个问题似乎与同样的问题有关:CSS3属性webkit-overflow-scrolling:touch ERROR

user1012566建议它与滚动内元素的位置属性有关(静态工作,没有其他的),尽管我对此有不同的结果。

另一位用户说他们已经在bugreport.apple.com网站上报告了这个问题,但报告的漏洞在那里并不公开,所以我们其他人不可能看到官方的回应,如果有的话,也不可能跟踪进度。

这个bug对于iframe来说似乎更糟。我创建了一个JSFIDDLE来演示它(在iOS 5.0.1设备上打开http://jsfiddle.net/KMayN/9/),并向苹果发送了一个bug报告。非常奇怪:如果你滚动,你会看到一个空白(未渲染)的内容…但如果你缩放,内容就会出现!等等......如果他们回复我,我会让你了解最新情况。我尝试了所有的方法(可滚动的iFrame带/不带div容器,带/不带滚动的容器,等等…),都没有办法:我们必须等待苹果的错误修复。

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

相关内容

  • 没有找到相关文章

最新更新