I have an image in a scrollable 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 on iOS (8.1.3), when I zoom in with my fingers, the DIV stops scrolling properly .
You can still scroll to a certain point, but it’s impossible to view the entire image , except when it is almost not scaled.
I tried hundreds of combinations of fixed, absolute and relative positioning on the body, div and image, as well as various combinations of overflow: fixed, etc. None of this works.
If I remove " -webkit-overflow-scrolling: touch; ", the problem disappears, but the scroll loses momentum and becomes painful.
The scroll behavior seems pretty random. Sometimes you can scroll up, sometimes not. The problem seems to be due to a conflict between scrolling viewports and scrolling images.
I posted a simple example at tech.ozake.com .
Is there a way to make the image smoothly scroll when zooming in on it?
[update May 23, 2017] This can be fixed in the next version of Mobile Safari: news.ycombinator.com .
source share