[web-animations-1] Compositing animations with empty keyframes are not clearly specified

Open
#4,543 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
5/5
Estimated time
Over a week
Newbie friendliness
25/100
Issue type
Bug
Clarity
Needs clarification
Activity status
Stale
Tech stack
javascript
Domain
frontend, web-dev

Research direction

Start with the attached test_animation.html.tar.gz and the Web Animations Level 1 keyframe-effect section linked in the issue. Compare the Chrome and Firefox behavior for the empty keyframe and determine which underlying-style behavior the specification defines. Done means the ambiguity has a documented specification resolution.

Written by the indexing model from the issue text.

Description

web-animations-1
Problem

We use the same html
test_animation.html.tar.gz in Chrome and Firefox and they show different animation behaviors.

    const keyframe1 = [
      {"transform":"translateX( 200px ) rotate( 360deg )"},
      {"transform":"translateX( 100% ) scale( 1 )"},
    ];
    const keyframe2 = [
      {"transform":"translateX( 200px ) rotate( 360deg )"},
      {"transform":"translateX( 100% ) scale( 2 )"},
      {"transform":"none"},
      {},
    ];

    const animation1 = div.animate(keyframe1, {
                              "duration":3000,
                              "easing":"linear",
      });
    const animation2 = div.animate(keyframe2, {
                              "duration":3000,
                              "easing":"linear",
      });

The animation2 starts simultaneously as the animation1. Both animations start from a translateX 200 px and rotate 360 degrees to translate 100 px and scale of 2. Then to the “none” which is a no operation(identity matrix). The default composition of two animations, playing at the same time, is the replace operation which means the result of compositing the effect value with the underlying value is simply the effect value.

The duration of the animation is 3 seconds. In the first two seconds, Firefox and Chrome have the same rendered animation. However, in the last second, we can see the square starts rotating in the Chrome but does not rotate in the Firefox.

Potential Explaination

We believe the empty keyframe “{}” is taking its underlying value from animation1 first keyframe, but we are not able to find this behavior in the spec. The confusion comes from whether the underlying style should be a neutral keyframe or the initial keyframe of animation1.

It appears that Chrome and Firefox are resolving the empty keyframe based on the initial keyframe of animation1; however, Chrome is resolving to the transform list

{"transform":"translateX( 200px ) rotate( 360deg )"}

whereas Firefox is resolving to a matrix representation

[1   0   0 200]
[0   1   0   0]
[0   0   1   0]
[0   0   0   1]
Dominant language
Bikeshed
Stars
4.9k
Forks
816
Avg merge
2d 18h
Merged PRs (30d)
24

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from w3c/csswg-drafts

All issues in w3c/csswg-drafts

Similar issues

More Web Dev issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.