相关疑难解决方法(0)

iOS 8 Safari - 页面缩放时无法滚动元素的内容

此问题仅在iOS 8中发生(确切地说是8.1).它不会在iOS 7中重现.

用例:在具有可滚动(长)内容的元素内滚动.

如果页面未放大 - 它按预期工作.

当您放大页面 - 它停止工作时,页面会滚动(就像您到达可滚动内容的末尾).效果是连续的:缩放越高 - 滚动内容的可能性越小.

测试页面:这里

打开iOS 8 Safari中的链接 - 看看列表元素是否可滚动.

现在放大页面并尝试滚动列表的内容 - 滚动页面而不是列表中的项目.我已经放置了红色标记,因此很容易看到页面滚动.

我尝试过不同的CSS规则甚至JS来阻止页面滚动(这仍然会使元素的内容滚动).

有没有人遇到过这种行为或有建议如何修复它?我真的不想用JS实现内容滚动.

禁用页面上的缩放(使用元视口)对我来说不是一个选项.

scroll mobile-safari zooming ios8

5
推荐指数
0
解决办法
1644
查看次数

Mobile Safari 中的错误是否有解决方法:捏合缩放导致随机滚动阻塞?

在滚动 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

css scroll mobile-safari ios pinchzoom

5
推荐指数
0
解决办法
1700
查看次数

标签 统计

mobile-safari ×2

scroll ×2

css ×1

ios ×1

ios8 ×1

pinchzoom ×1

zooming ×1