iOS滚动有时会卡住

Question

我在 iphone (iOS 9.2) 上的 safari 中遇到了一个奇怪的行为

如果您看到此页面 http://jsbin.com/vofubidaxe在桌面上，有 3 张 Pandas 图片，您可以滚动它

但如果您在 iphone safari 上看到它，有时(并非总是)您无法滚动它。滚动似乎卡住了(不确定卡住是否是描述行为的正确词)

在这里编辑 http://jsbin.com/vofubidaxe/edit?html,css,output

要点 https://gist.github.com/anonymous/938fc5f84222d8ed06cdcb7f6092da8d

nav 标签有一个 position: fixed，如果它被移除，滚动恢复正常。

抱歉，如果这是 Safari 中的已知错误。如何修复？

Answer 1

在元素上添加 position:fixed 会将其从文档 DOM 中删除 - 因此 Pandas 图像不会呈现在实际文档中。

它有时会“卡住”，因为可能是您触摸到文档时冒泡 - 因此轻弹会强制滚动文档而不是固定元素。

解决方案是删除相对元素并为固定父元素提供高度 - 如果您想要全高，请尝试添加 top:0;right:0;bottom:0;left:0 然后溢出它。

但是，这会在 iphone 上运行，但会导致其他设备出现问题 - android、windows phone 等，因为溢出元素支持不佳。