<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 - Horizontally-scrollable items with a 3d transform are rendered incorrectly in RTL when container has -webkit-overflow-scroll: touch"
href="https://bugs.webkit.org/show_bug.cgi?id=157482">157482</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>Horizontally-scrollable items with a 3d transform are rendered incorrectly in RTL when container has -webkit-overflow-scroll: touch
</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>wetmore.matt@gmail.com
</td>
</tr>
<tr>
<th>CC</th>
<td>simon.fraser@apple.com
</td>
</tr></table>
<p>
<div>
<pre>Created <span class=""><a href="attachment.cgi?id=278424" name="attach_278424" title="A small HTML file reproducing the bug.">attachment 278424</a> <a href="attachment.cgi?id=278424&action=edit" title="A small HTML file reproducing the bug.">[details]</a></span>
A small HTML file reproducing the bug.
In RTL, a set of inline elements within a horizontally-scrollable container will flow from right to left, and the container starts scrolled all the way to the right. With default scrolling, adding a 3d transform to the items in the scrollable container causes no problem. However, on iOS safari, adding -webkit-overflow-scroll: touch to the scrollable container causes any elements of the scroller with a 3d transform to be rendered in the wrong position. For this bug to occur, there must be enough elements in the scrollable container that the container can actually scroll. Viewing the buggy page with the web inspector shows that the browser thinks the elements are in the correct place (and their tap targets still exist in the correct place as well), but the elements are drawn in the wrong position.
I've attached a small HTML file which reproduces the issue.</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>