Skip div scrolling with Safari on iPhone 6+, iPad 3 when zoomed in

It seems that on iPhone 6+ and iPad 3 (the devices I have tested so far that reproduce the problem) there is a problem with the scroll of the div when the page is enlarged.

When you first load the page with the following main content, the div has no scrolling problems.

Play

  • Enlarge the page slightly so that the scale is greater than 1.0. This is apparently more often than β€œturning off” scrolling for a div, either completely or for the most part. The page itself scrolls or β€œbounces”.
  • Zoom back to 1.0 scale and it scrolls again.

The problem can be a little inconsistent, when sometimes when you enlarge and play by touching / moving / scaling the page around the scroll, it will work a little, but not by chance. Only zooming out seems to reset so that the div can be scrolled sequentially without problems.

This does not seem to play from Chrome on iPhone 6+, iPad 3, iPhone 4 (both Chrome and Safari), as well as several Android phones (Chrome).

Does anyone encounter this problem and / or know how to solve it? Or am I missing something?

Any information or help is appreciated.

#outer { border: 1px solid #000; width: 100px; height: 100px; overflow: auto; /* overflow-y: scroll; -webkit-overflow-scrolling: touch; */ } #inner { width: 100px; background-color: cornflowerblue; } p { margin: 0; } 
 <div id="outer"> <div id="inner"> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> </div> </div> 
+4
source share

Source: https://habr.com/ru/post/1211182/


All Articles