<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 - Overlay with -webkit-overflow-scrolling:touch doesn't become scrollable after added text makes it taller"
href="https://bugs.webkit.org/show_bug.cgi?id=158342">158342</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>Overlay with -webkit-overflow-scrolling:touch doesn't become scrollable after added text makes it taller
</td>
</tr>
<tr>
<th>Classification</th>
<td>Unclassified
</td>
</tr>
<tr>
<th>Product</th>
<td>WebKit
</td>
</tr>
<tr>
<th>Version</th>
<td>Safari 9
</td>
</tr>
<tr>
<th>Hardware</th>
<td>iOS
</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>Layout and Rendering
</td>
</tr>
<tr>
<th>Assignee</th>
<td>webkit-unassigned@lists.webkit.org
</td>
</tr>
<tr>
<th>Reporter</th>
<td>webkit@chrisrebert.com
</td>
</tr>
<tr>
<th>CC</th>
<td>simon.fraser@apple.com
</td>
</tr></table>
<p>
<div>
<pre>Steps to reproduce:
1. Open <a href="http://output.jsbin.com/tuxahu/quiet">http://output.jsbin.com/tuxahu/quiet</a> in iOS 9.3 Safari.
2. Tap the "Go" button.
3. Observe that a modal dialog appears with text indicating that its content is loading.
4. Wait for the "loading" text to go away and be replaced with lot of other text,
causing the modal to become taller than the screen.
5. Attempt to scroll the modal downward to read the rest of the text.
Actual result:
The underlying <body> below the modal scrolls temporarily (despite being overflow:hidden),
and the modal within the topmost position:fixed "layer" doesn't move at all.
Expected result:
The modal should move upward, revealing more of the text.
Original Bootstrap issue:
<a href="https://github.com/twbs/bootstrap/issues/17695">https://github.com/twbs/bootstrap/issues/17695</a>
Further details:
This sounds similar to <a class="bz_bug_link
bz_status_NEW "
title="NEW - Dynamic content in '-webkit-scrolling-touch' scrollable container breaks scrolling"
href="show_bug.cgi?id=150974">https://bugs.webkit.org/show_bug.cgi?id=150974</a>
The bug seems to be related to `-webkit-overflow-scrolling:touch`.
Setting `-webkit-overflow-scrolling:auto` on the `.modal` fixes the problem.
I also observed that merely toggling the `.modal-open .modal { overflow-y: auto; }` style
off and back on again in Safari DevTools (while connected to the Simulator,
and leaving `-webkit-overflow-scrolling:touch` intact) is sufficient to cause the modal to become scrollable again.</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>