<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 interferes with the propagation of perspective."
href="https://bugs.webkit.org/show_bug.cgi?id=156435">156435</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>-webkit-overflow-scrolling:touch interferes with the propagation of perspective.
</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>Unspecified
</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>vollick@chromium.org
</td>
</tr>
<tr>
<th>CC</th>
<td>simon.fraser@apple.com
</td>
</tr></table>
<p>
<div>
<pre>Try visiting <a href="https://output.jsbin.com/muqaqejafi">https://output.jsbin.com/muqaqejafi</a>
Clicking the button toggles -webkit-overflow-scrolling : touch/auto. When touch is selected, perspective from the scroller is not applied to the background as per my understanding of the TR transform spec and parallax fails. This appears to be the source of some pain in the wild (<a href="https://css-tricks.com/forums/topic/parallax-scrolling-that-actually-works-on-ipad/">https://css-tricks.com/forums/topic/parallax-scrolling-that-actually-works-on-ipad/</a>). I'm not aware of a way to get both fling and parallax on an overflow scroller on iOS without resorting to JS (is there a way?).
Unrelated: it is difficult to click the button on iOS without being scrolled to the top. Could the scrolled content be interfering with hit testing, despite the scroll clip?</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>