<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 - Inherited CSS property transitions happen in sequence instead of simultaneously"
href="https://bugs.webkit.org/show_bug.cgi?id=153843">153843</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>Inherited CSS property transitions happen in sequence instead of simultaneously
</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>Macintosh
</td>
</tr>
<tr>
<th>OS</th>
<td>OS X 10.11
</td>
</tr>
<tr>
<th>Status</th>
<td>NEW
</td>
</tr>
<tr>
<th>Severity</th>
<td>Minor
</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>brandon.smith.945@gmail.com
</td>
</tr></table>
<p>
<div>
<pre>When both a parent and child element have the same transition configuration, and the property in question is changed on the parent (and inherited by the child), the child's transition will wait until the parent's has finished. If the child's property is changed directly - instead of being inherited - the transitions will happen at the same time. I've made a JSFiddle to illustrate (<a href="https://jsfiddle.net/brundon/32bLoLuw/2/">https://jsfiddle.net/brundon/32bLoLuw/2/</a>). I've confirmed this happens in Chrome and Safari on OSX, and thought it might have been an obscure CSS spec quirk until testing it in Firefox and finding that it does not happen there.</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>