<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 - Delayed instantaneous animations not honouring ' forwards' fill-mode"
href="https://bugs.webkit.org/show_bug.cgi?id=150326">150326</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>Delayed instantaneous animations not honouring ' forwards' fill-mode
</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>Unspecified
</td>
</tr>
<tr>
<th>OS</th>
<td>All
</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>Animations
</td>
</tr>
<tr>
<th>Assignee</th>
<td>webkit-unassigned@lists.webkit.org
</td>
</tr>
<tr>
<th>Reporter</th>
<td>mario@webkit.org
</td>
</tr>
<tr>
<th>CC</th>
<td>cgarcia@igalia.com, dino@apple.com, hyatt@apple.com, mrobinson@webkit.org
</td>
</tr></table>
<p>
<div>
<pre>Created <span class=""><a href="attachment.cgi?id=263471" name="attach_263471" title="Reduced test case">attachment 263471</a> <a href="attachment.cgi?id=263471&action=edit" title="Reduced test case">[details]</a></span>
Reduced test case
DESCRIPTION
In recent versions of WebKit, if an instantaneous CSS animation is defined with animation-fill-mode = forwards and a positive value for animation-delay, the end result is that the values specified for the 0% keyframe are applied to the animated element outside of the animation, instead of one for the 100% keyframe.
I believe this is wrong, as per the CSS spec for animation-duration (<a href="http://www.w3.org/TR/css3-animations/#animation-duration-property">http://www.w3.org/TR/css3-animations/#animation-duration-property</a>):
"When the duration is ‘0s’ ‘animation-fill-mode’ still applies, so an animation that fills backwards will show the value of the 0% keyframe during any delay period, and an animation that fills forwards will retain the value specified at the 100% keyframe, even if the animation was instantaneous."
I initially found this in WebKitGTK 2.10.1, but then I've tried in my Mac Mini with OS X Yosemite and I could reproduce it in the latest WebKit nightly, so it looks like a cross platform bug.
More specifically, in OS X:
* Works OK with Safari 9.0 (10601.1.56.2)
* FAILS with WebKit Nightly r191175
I'm attaching a test case I wrote, so that the bug can be easily reproduceable.
STEPS TO REPRODUCE
1. Uncompress the contents of the attached file and load index.html in MiniBrowser / Safari + WebKit Nightly
2. You should see some text and 4 red circles at the beginning with the background going darker for 2 seconds
EXPECTED OUTOME
After the background has gone darker for 2 seconds the delayed zero-seconds animation to change opacity of the first red circle from 0% to 100% should be instantaneously applied, leaving that first circle visible afterwards (together with the other 3 circles, which have slightly different animation parameters)
ACTUAL OUTCOME
The first circle disappears, while the other three remain visible due to either:
* Not using a delay
* Using animation-fill-mode = none
* Using a non-zero value for animation-duration</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>