使用webkit-overflow-scrolling滚动时，iOS5图像消失：触摸 [英] iOS5 Images disappear when scrolling with webkit-overflow-scrolling: touch

问题描述

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

I had previously been using iScroll plugin but wanted to drop it for the native behaviour.

初始实现是使用

webkit-overflow-scrolling: auto;

但我将此更新为...

however I updated this to ...

webkit-overflow-scrolling: touch

.. to在触摸滚动上启用动作/惯性。

.. to enable the motion/inertia on the touch scroll.

这个问题是导航中包含的列表项在滚动时完全消失，只有在动量到来后才会返回休息。

The issue with this is the list items contained within the navigation disappear completely when scrolling, and only return once the momentum has come to a rest.

这方面的一个例子可以是见到这里

An example of this can be seen here

推荐答案

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

I have had the same problem in the past, if you need to use positioned elements try adding -webkit-transform: translateZ(0); to the elements or the container. This property often forces the browser to use hardware acceleration and with the extra power your images will most likely not disappear. It worked for me anyway.

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

More useful stuff here too: http://www.html5rocks.com/en/tutorials/speed/html5/

这篇关于使用webkit-overflow-scrolling滚动时，iOS5图像消失：触摸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！