此问题仅在iOS 8中发生(确切地说是8.1).它不会在iOS 7中重现.
用例:在具有可滚动(长)内容的元素内滚动.
如果页面未放大 - 它按预期工作.
当您放大页面 - 它停止工作时,页面会滚动(就像您到达可滚动内容的末尾).效果是连续的:缩放越高 - 滚动内容的可能性越小.
测试页面:这里
打开iOS 8 Safari中的链接 - 看看列表元素是否可滚动.
现在放大页面并尝试滚动列表的内容 - 滚动页面而不是列表中的项目.我已经放置了红色标记,因此很容易看到页面滚动.
我尝试过不同的CSS规则甚至JS来阻止页面滚动(这仍然会使元素的内容滚动).
有没有人遇到过这种行为或有建议如何修复它?我真的不想用JS实现内容滚动.
禁用页面上的缩放(使用元视口)对我来说不是一个选项.
我在滚动 div 中有一个图像:
<div style="
width:600px;height:400px;
overflow:scroll;
position:relative;
top:0;left:0;
-webkit-overflow-scrolling: touch;">
<img src=image.jpg width=2000 height=2000>
</div>
Run Code Online (Sandbox Code Playgroud)
它可以按预期在任何地方工作,除了在 iOS (8.1.3) 上,当我用手指放大时,DIV 停止正确滚动。
仍然可以滚动到某个点,但除非几乎没有缩放,否则无法查看整个图像。
我已经尝试了数百种在身体、div 和图像上的固定、绝对和相对定位组合,以及溢出的各种组合:固定等。它们都不起作用。
如果我删除“ -webkit-overflow-scrolling: touch; ”,问题就会消失,但滚动会失去动力并变得痛苦。
滚动行为似乎很随机。有时您可以向上滚动,有时则不能。问题似乎来自视口滚动和图像滚动之间的冲突。
我在tech.ozake.com 上发布了一个简单的例子。
有没有办法让图片在放大时平滑滚动?
[2017 年 5 月 23 日更新]这可能会在下一版 Mobile Safari 中修复:news.ycombinator.com。