<html>
<head>
<base href="https://bugs.webkit.org/" />
</head>
<body><table border="1" cellspacing="0" cellpadding="8">
<tr>
<th>Bug ID</th>
<td><a class="bz_bug_link
bz_status_NEW "
title="NEW - -webkit-overflow-scrolling:touch in certain HTML structure causes erroneous rubberbanding"
href="https://bugs.webkit.org/show_bug.cgi?id=165154">165154</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>-webkit-overflow-scrolling:touch in certain HTML structure causes erroneous rubberbanding
</td>
</tr>
<tr>
<th>Classification</th>
<td>Unclassified
</td>
</tr>
<tr>
<th>Product</th>
<td>WebKit
</td>
</tr>
<tr>
<th>Version</th>
<td>Other
</td>
</tr>
<tr>
<th>Hardware</th>
<td>iPhone / iPad
</td>
</tr>
<tr>
<th>OS</th>
<td>iOS 9.3
</td>
</tr>
<tr>
<th>Status</th>
<td>NEW
</td>
</tr>
<tr>
<th>Severity</th>
<td>Normal
</td>
</tr>
<tr>
<th>Priority</th>
<td>P2
</td>
</tr>
<tr>
<th>Component</th>
<td>HTML Events
</td>
</tr>
<tr>
<th>Assignee</th>
<td>webkit-unassigned@lists.webkit.org
</td>
</tr>
<tr>
<th>Reporter</th>
<td>alan.delong@ceros.com
</td>
</tr></table>
<p>
<div>
<pre>Created <span class=""><a href="attachment.cgi?id=295634" name="attach_295634" title="POC for iPad erroneous rubberbanding">attachment 295634</a> <a href="attachment.cgi?id=295634&action=edit" title="POC for iPad erroneous rubberbanding">[details]</a></span>
POC for iPad erroneous rubberbanding
Take the HTML from this codepen, save it as its own page (or grab the attached HTML file), and open it on an iPad in mobile Safari: <a href="http://codepen.io/anon/pen/oYoXYv">http://codepen.io/anon/pen/oYoXYv</a>
So basically we have 4 absolutely positioned divs for showing where you are on the page, inside a very tall div (.page-scroll), which is inside a relatively positioned div with overflow-y: scroll and -webkit-overflow-scrolling: touch (.page-container). The other parent divs (page-viewport and viewport) are there to ensure a consistent look across devices.
On every other device we've tried, swiping to scroll scrolls the page-scroll div inside the page-container div as expected. However, on iPad, we are seeing non-deterministic behavior. If you swipe quickly, the page scrolls normally, but if you swipe slowly, the page will sometimes rubberband. It's as if the touchstart event is getting sent to one of the parent divs, and so the iPad thinks it is at the bottom or top of the page.
However, if -webkit-overflow-scrolling: touch is removed from the .page-container div, the problem disappears. But you lose momentum scrolling. I should also note that if this markup is loaded onto a page via an iframe, the problem goes away, but that is not really an option for us (because reasons).
This was asked about on StackOverflow but was unresolved, so we're reporting it here. <a href="http://stackoverflow.com/questions/37999637/ipad-sometimes-rubberbands-with-webkit-overflow-scrolling-touch">http://stackoverflow.com/questions/37999637/ipad-sometimes-rubberbands-with-webkit-overflow-scrolling-touch</a>
This may be related to one of these reported bugs, however without solving the bug it is hard to say:
<a class="bz_bug_link
bz_status_UNCONFIRMED "
title="UNCONFIRMED - -webkit-overflow-scrolling:touch; destroys container structure and also does not fire any event on decceleration phase"
href="show_bug.cgi?id=106918">https://bugs.webkit.org/show_bug.cgi?id=106918</a>
<a class="bz_bug_link
bz_status_NEW "
title="NEW - iOS touch scrolling doesn't take occluding elements into account"
href="show_bug.cgi?id=117059">https://bugs.webkit.org/show_bug.cgi?id=117059</a></pre>
</div>
</p>
<hr>
<span>You are receiving this mail because:</span>
<ul>
<li>You are the assignee for the bug.</li>
</ul>
</body>
</html>