5

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.

Andy Swift
  • 2,179
  • 3
  • 32
  • 53
  • This question is similar to: http://stackoverflow.com/questions/27968453/ios-8-safari-cant-scroll-elements-content-when-page-is-zoomed – Andy Swift Feb 12 '15 at 07:47
  • And http://stackoverflow.com/questions/27387666/issue-scrolling-div-with-safari-on-iphone-6-ipad-3-when-zoomed-in – Andy Swift Feb 12 '15 at 08:10
  • 1. I've tried removing -webkit-overflow-scrolling: touch - now it doesn't scroll at all... 2. FYI - I calculate the zoom level like this: window.screen.width / window.innerWidth - the scroll functionality breaks when zoom > 1.5 – alonkad Feb 12 '15 at 11:42
  • I think it's a bug. If not, they may have implemented it to keep the scrolling smooth (don't have to calculate a giant image to scroll). – Andy Swift Feb 21 '15 at 16:59
  • Has anyone found a solution for this? I'm having the same problem. – Andrew Kirchmyer May 12 '17 at 21:41
  • 1
    I am still looking for an answer two years later. I think it's just a bug in Safari. When you pinch to zoom in iOS a virtual viewport is created that is smaller than the actual window. A scrolling event moves the smaller virtual viewport around on the overall page, and it is no longer possible to scroll a separate element on the page. It's as though the contents of the page is frozen when you pinch to zoom. One thing to try is to make the image a background image behind a text field. Presumably iOS permits scrolling a textarea box (for example) when zoomed. – Andy Swift May 13 '17 at 13:10

0 Answers0