Bug 85059 - CSS Transitions vs. SMIL Animations race condition
Summary: CSS Transitions vs. SMIL Animations race condition
Status: RESOLVED CONFIGURATION CHANGED
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 528+ (Nightly build)
Hardware: Unspecified Unspecified
: P1 Major
Assignee: Nikolas Zimmermann
URL:
Keywords:
Depends on:
Blocks: 41761
  Show dependency treegraph
 
Reported: 2012-04-27 06:34 PDT by Nikolas Zimmermann
Modified: 2022-07-15 14:37 PDT (History)
4 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Nikolas Zimmermann 2012-04-27 06:34:00 PDT
CSS Transitions vs. SMIL Animations race condition.

Testcase:
<svg xmlns="http://www.w3.org/2000/svg">
<style>
    rect {
        fill: teal;
        -webkit-transition-property: fill;
        -webkit-transition-duration: 0.5s;
    }
</style>
 
<rect width="100" height="100">
  <animate attributeName="fill" from="black" to="purple" fill="freeze" dur="3s" begin="3s"/>
</rect>
</svg>

You'll see no animation at all in trunk, it stays teal, and switches to purple at 3s, using a transition from teal to purple!
If you inspect what's going on you'll find that each SMIL induced CSS property change, triggers a CSS transitions from the lastAnimatedValue to the nextAnimatedValue.

It gets racy eg. for -webkit-transition-duration: 0.025s, which is the same time as the SMIL/CSS animation timers. I'll flag this as major bug.

Long description:
Each time SMIL changes a CSS property in the separated SMIL properties ruleset, we'll trigger a SyntheticStyleChange. This in turn causes the RenderStyle of the target RenderObject to be updated, via setAnimatableStyle. The RenderStyle contains the new 'fill' value from the SMIL animation. So far so good.
Now setStyle(AnimationController::updateAnimations(renderer, style)) is called, which detects that 'fill' changed, and a CSS transition is associated with that, so it starts/queues a CSS transitions from lastAnimatedVAlue to nextAnimatedValue, and so on.

Mozilla used to suffer from the same problem, they've solved it by never executing any transition for a CSS property change due to SMIL animations. We need to work out how we can see this information in AnimationController / RenderObject / ... Suggestions?
Comment 1 Brent Fulgham 2022-07-15 14:37:49 PDT
Safari, Chrome, and Firefox all agree on rendering for this test case. I don't believe there is any remaining compatibility issue.