<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 - <body> with overflow:hidden CSS is scrollable on iOS"
href="https://bugs.webkit.org/show_bug.cgi?id=153852">153852</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td><body> with overflow:hidden CSS is scrollable on iOS
</td>
</tr>
<tr>
<th>Classification</th>
<td>Unclassified
</td>
</tr>
<tr>
<th>Product</th>
<td>WebKit
</td>
</tr>
<tr>
<th>Version</th>
<td>WebKit Nightly Build
</td>
</tr>
<tr>
<th>Hardware</th>
<td>iOS
</td>
</tr>
<tr>
<th>OS</th>
<td>iOS 9.2
</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>CSS
</td>
</tr>
<tr>
<th>Assignee</th>
<td>webkit-unassigned@lists.webkit.org
</td>
</tr>
<tr>
<th>Reporter</th>
<td>webkit@chrisrebert.com
</td>
</tr></table>
<p>
<div>
<pre>Created <span class=""><a href="attachment.cgi?id=270621" name="attach_270621" title="Testcase demonstrating the problem">attachment 270621</a> <a href="attachment.cgi?id=270621&action=edit" title="Testcase demonstrating the problem">[details]</a></span>
Testcase demonstrating the problem
Applying `overflow: hidden` to the `<body>` should make it non-scrollable.
This works correctly on OS X Safari, but doesn't work correctly on iOS Safari.
Original Bootstrap issue:
Lost to the sands of time, but <a href="https://github.com/twbs/bootstrap/issues/14839">https://github.com/twbs/bootstrap/issues/14839</a> is relevant & popular.
See also <a href="http://getbootstrap.com/getting-started/#overflow-and-scrolling">http://getbootstrap.com/getting-started/#overflow-and-scrolling</a>
Steps to reproduce:
1. Open the attached testcase in iOS Safari.
2. Tap the "Launch demo modal" button.
3. A yellow box with text appears.
4. Scroll the yellow box to its bottom, where there are "Close" and "Save changes" buttons, and lift your finger off the screen to ensure that the scroll gesture ends.
5. Attempt to scroll the yellow box further downward (which is to say, apply a "fling upward" gesture to the yellow box).
Actual result:
The <body> underneath the yellow box scrolls downward.
Expected result:
The <body> should not scroll (just like on OS X Safari).</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>