Closed Bug 1426246 Opened 2 years ago Closed 2 years ago

Paused CSS animations with a negative delay render differently from running animations

Categories

(Core :: Layout, defect, P1)

57 Branch
defect

Tracking

()

RESOLVED FIXED
mozilla59
Tracking Status
firefox59 --- fixed

People

(Reporter: mcbain.asm, Assigned: emilio)

References

Details

Attachments

(1 file)

User Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.84 Safari/537.36

Steps to reproduce:

I created an animated half-circle that changes colors halfway through the animation.

1. Visit https://jsfiddle.net/u0gftoko/9/ in Firefox
2. Visit https://jsfiddle.net/u0gftoko/9/ in Chrome or IE11*

* Edge should probably be fine too, but I don't have a box handy to test with at this moment.


Actual results:

The result displays correctly when the animation is set to running, but when the animation is paused and the display state is taken from the wrong part of the animation. It renders as if it is 10s into the animation instead of 60s.

In this particular case it renders the half-circle hotpink instead of limegreen.


Expected results:

A delay of -60s should render the half-circle limegreen, like it would at the 60s mark of a running animation. A paused animation with a negative delay should render the same as an animation paused after the same (positive) duration has been spent.
The goal here was actually to use this in a paused state, updating the animation-delay with code based on user interactions. This means that while it works correctly in the running case, that doesn't help.

Here's a more succinct test-case with all the background colors and extraneous text stripped out: https://jsfiddle.net/u0gftoko/11/ In this test-case (as above) the third wedge should be limegreen, but in Firefox it is hotpink. The fourth wedge should turn limegreen after completing a half rotation, which works correctly in all browsers I tested (Chrome 63.0.3239.84, IE11, and Firefox 57.0.2)
Component: Untriaged → Layout
Product: Firefox → Core
Priority: -- → P1
This looks like an issue inheriting animation-delay.
Flags: needinfo?(emilio)
Ok, so this makes perfect sense, and I don't know what is our animation code trying to do...

So, when we set animation-duration directly, as in: "animation-duration: -60s", we fill all the animations at computed value time.

However when we inherit, we have a:

  .take(count as usize)

which basically makes us only fill the first animations.

The real fix is bug 1420928, that is, moving all this to used-value time. I can fix this in the meantime though.
Assignee: nobody → emilio
Flags: needinfo?(emilio)
See Also: → 1420928
Status: UNCONFIRMED → ASSIGNED
Ever confirmed: true
Comment on attachment 8938252 [details]
Bug 1426246: Fix inheritance of animation and transition properties of mismatched length.

https://reviewboard.mozilla.org/r/209006/#review214696
Attachment #8938252 - Flags: review?(hikezoe) → review+
Servo bits @ https://github.com/servo/servo/pull/19617. Will land the test-case tomorrow.
Pushed by ecoal95@gmail.com:
https://hg.mozilla.org/integration/autoland/rev/064e0be1cc29
Fix inheritance of animation and transition properties of mismatched length. r=hiro
https://hg.mozilla.org/mozilla-central/rev/064e0be1cc29
Status: ASSIGNED → RESOLVED
Closed: 2 years ago
Resolution: --- → FIXED
Target Milestone: --- → mozilla59
Duplicate of this bug: 1417932
You need to log in before you can comment on or make changes to this bug.