<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 - Element translated out of container containing text does not render until transition end"
href="https://bugs.webkit.org/show_bug.cgi?id=152975">152975</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>Element translated out of container containing text does not render until transition end
</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.0
</td>
</tr>
<tr>
<th>Status</th>
<td>NEW
</td>
</tr>
<tr>
<th>Severity</th>
<td>Major
</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>contact@benfrain.com
</td>
</tr></table>
<p>
<div>
<pre>Here is a reduction. Behaviour is as expected in desktop Safari/WebKit. iOS has the problem (tested in iOS 9.2).
<a href="http://codepen.io/benfrain/full/PZjpxr">http://codepen.io/benfrain/full/PZjpxr</a>
We have two divs inside another div. Both internal divs have a different colour background. One div has text in, one does not.
When the button is clicked both divs translate out of their parent container (via transform3d). When the button is clicked again to toggle the class off, only the div without text transitions back to it's state as expected. The other does not appear until transition end.</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>