<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 - Safari mis-applies "animation-fill-mode: forwards" when using fractional iteration count"
href="https://bugs.webkit.org/show_bug.cgi?id=146996">146996</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>Safari mis-applies "animation-fill-mode: forwards" when using fractional iteration count
</td>
</tr>
<tr>
<th>Classification</th>
<td>Unclassified
</td>
</tr>
<tr>
<th>Product</th>
<td>WebKit
</td>
</tr>
<tr>
<th>Version</th>
<td>528+ (Nightly build)
</td>
</tr>
<tr>
<th>Hardware</th>
<td>Macintosh
</td>
</tr>
<tr>
<th>OS</th>
<td>Mac OS X 10.9
</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>freelanceb@impressivewebs.com
</td>
</tr></table>
<p>
<div>
<pre>See the following demo:
<a href="http://codepen.io/SitePoint/pen/VLXQmM">http://codepen.io/SitePoint/pen/VLXQmM</a>
Notice in all other browsers, the ball stops halfway. In Safari, the ball stops briefly, then jumps to the end. This seems to be an attempt to apply the "forwards" value of the fill mode. But this is incorrect behaviour. The "forwards" state is at the half-iteration point, not the full iteration. Sorry for not creating a RTC. Someone could easily do that using the code in the demo, if necessary. Note also that the demo is using autoprefixer to add the missing "-webkit" prefixes automatically, so these don't actually appear in the CSS panel.</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>