It seems that on iPhone 6+ and iPad 3 (devices I've tested so far which reproduce issue) there is an issue with scrolling a div when the page is zoomed in.
When first loading a page with the following basic content, the div has no problem scrolling.
Reproduction
- Zoom page in a bit so that scale is greater than 1.0. This seems to more often than not 'disable' scrolling for the div either completely or for the most part. The page itself scrolls or 'bounces'.
- Zoom back out to 1.0 scale and it scrolls again.
The issue can be a bit inconsistent, where sometimes when zoomed in and playing around with touching/moving/scaling the page around the scrolling will work for a bit but unreliably. Only zooming back out seems to reset it so that the div can be scrolled consistently without issue.
This does not seem to reproduce with Chrome on iPhone 6+, iPad 3, iPhone 4 (both Chrome and Safari) as well as several Android phones (Chrome).
Anyone run into this issue and/or know how to resolve? Or am I missing something?
Any information or help 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>