使用webkit overflow滚动时iOS5图像消失滚动：触摸

我以前一直在使用iScroll插件，但出于本机行为的考虑，我想放弃它

最初的实现是使用

webkit-overflow-scrolling: auto;

但是我更新了这个

webkit-overflow-scrolling: touch

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

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

---

这方面的一个例子是

这也是我遇到的一个错误-这个问题似乎与同一个问题有关：

用户1012566建议这与卷轴内元素的位置属性有关（静态工作，其他什么都不做），尽管我的结果与此不符

---

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

使用iFrame时，这一错误似乎更严重。 我创建了一个JSFIDLE来演示它（用iOS 5.0.1设备打开），并向苹果发送了一份错误报告。 非常奇怪：如果你滚动，你会看到一个空白（未渲染）的内容…但是如果你缩放，内容就会出现！等等 如果他们回复我，我会告诉你最新情况。

---

我尝试了一切（带/不带div容器的可滚动iFrame、带/不带滚动的容器等等），根本没有办法：我们必须等待苹果的错误修复。

我们追踪到了位置：相对或位置：绝对的元素。删除这些元素后，项目将在滚动时显示。

我过去也遇到过同样的问题，如果需要使用定位元素，请尝试添加

-webkit transform:translateZ（0）到元素或容器。此属性通常会强制浏览器使用硬件加速，并且通过额外的功能，图像很可能不会消失。不管怎么说，这对我很有效

这里还有更有用的东西：
如马克·纳普瑟所说，添加了以下css定义：

-webkit-transform: translateZ(0);

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

-webkit-overflow-scrolling: touch;

我把“变换”的定义放在上面的li标签上，包装了图像，它立刻解决了问题。
希望这能有所帮助……
有人告诉我，这已被列为webkit的一个bug。还有谁能证实这一点吗？我似乎在bugzilla列表中找不到它。bugreport.apple.com会解释为什么我在网上找不到任何关于这个bug的参考。我也将通过webkit bugzilla报告注册它。当你注册时，在这里发布一个链接？它将帮助任何有同样问题的人找到这个问题。苹果向我询问了更多信息（截图和调试控制台转储）。我把这些都提交给他们了，一旦他们告诉我其他的事情，我会尽快给你更新。因此，这个问题目前仍处于“开放”状态。苹果公司告诉我，他们已经发现这个漏洞已经被发现，工程团队正在对此进行研究。。。让我们期待在下一个iOS版本中得到修复！我真的很失望。。。苹果没有在iOS 5.1中解决这个问题：-（他们也没有给我任何更新：-）（也许他们不希望网络应用在iPad上运行得太好，否则他们从本地应用（Apple store）获得的收入会减少？这很糟糕。：（那么现在最好的解决办法是使用类似滚动的东西吗？目前，我只是回到了“webkit overflow scrolling:scroll；”（没有动力，但至少它是可用的），希望有一天苹果会发布一个错误修复程序……我不确定这在旧版本中是否有效，但在iOS 7.1中似乎没有任何作用。帮助！我把它放在具有
-webkit overflow scrolling:touch
的元素上，它“被治愈了”“这可能会导致布局混乱。使用此解决方案时请小心，尤其是在移动设备等内存受限的环境中。在Cordova iOS应用程序上，我看到添加了
transform:translateZ（0）
列表中的几十个元素额外增加了70 MB的内存使用量，这导致了内存不足崩溃。不幸的是，我没有很好的解决方法。我在切换视图时添加了转换CSS，然后在计时器上禁用了它。这很有技巧，但到目前为止仍然有效。将其中任何一个添加到克罗林·迪夫也在这里工作。
-webkit-transform: translate3d(0, 0, 0);