Is there a workaround for bug in Mobile Safari: Pinch to Zoom results in random scrolling blockage?

爷,独闯天下 提交于 2019-12-29 06:28:13

问题


I have an image in a scrolling 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>

It works everywhere as expected, except that on iOS (8.1.3), when I zoom in using my fingers, the DIV stops scrolling correctly.

One can still scroll to a certain point, but it is impossible to view the entire image except when it's barely zoomed at all.

I have tried hundreds of combinations of fixed, absolute & relative positioning on the body, the div and the image, and also various combinations of overflow:fixed etc. None of it works.

If I remove "-webkit-overflow-scrolling: touch;", the problem goes away but scrolling loses momentum and becomes painful.

The scrolling behavior seems pretty random. Sometimes you can scroll up, sometimes not. The problem seems to come from a conflict between the viewport scrolling and the image scrolling.

I posted a simple example at tech.ozake.com.

Is there any way to make the image smoothly scrollable when one zooms in on it?

[update 23 may 2017] This may be fixed in the next version of Mobile Safari: news.ycombinator.com.

来源:https://stackoverflow.com/questions/28409509/is-there-a-workaround-for-bug-in-mobile-safari-pinch-to-zoom-results-in-random

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!