[csswg-drafts] [web-animations-1] commitStyles should say when styles are flushed and indicate that changes to inline styles are applied immediately (#11084)

birtles has just created a new issue for https://github.com/w3c/csswg-drafts:

== [web-animations-1] commitStyles should say when styles are flushed and indicate that changes to inline styles are applied immediately ==
In [Mozilla bug 1917071](https://bugzilla.mozilla.org/show_bug.cgi?id=1917071) we came across a case where Gecko is firing transitions as a result of calling `commitStyles`.

Specifically, for the following content:

```css
#box {
  opacity: 0;
  transition: opacity 1s;
}
```

```js
document.querySelector('button').onclick = () => {
  let animation = document
    .querySelector('#box')
    .animate({ opacity: 1 }, { fill: 'forwards', duration: 1000 });
  animation.onfinish = () => {
    animation.commitStyles();
    animation.cancel();
  };
};
```

After analysis, it looks like the problem is that although [`commitStyles`](https://drafts.csswg.org/web-animations-1/#dom-animation-commitstyles) is defined as triggering a style flush:

> Unlike most other methods defined on this interface, calling this method does trigger a [style change event](https://drafts.csswg.org/css-transitions-1/#style-change-event) (see [§ 6.13 Model liveness](https://drafts.csswg.org/web-animations-1/#model-liveness)).

It doesn't define when this takes place. Logically it needs to happen towards the start of the procedure so that the latest styles are applied. The code for [Gecko](https://searchfox.org/mozilla-central/rev/18f09bdf36a62ea7079c018301f1d257f71f655b/dom/animation/Animation.cpp#826) and [Blink](https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/animation/animation.cc;l=3312;drc=b21e12bf87cd421fa90b9d9fa96ffa7ab37d4ed7) shows they flush style before updating inline style.

However, there is no requirement to flush styles at the end of the procedure. Furthermore, my reading of the procedure to [update the style attribute](https://drafts.csswg.org/cssom-1/#update-style-attribute-for) doesn't require computing style immediately. As a result, the style attribute may be updated but not yet reflected in the corresponding element's computed style.

If the animation is canceled before style is next computed, the changes to inline style will not be reflected in the [before-change style](https://drafts.csswg.org/css-transitions-1/#before-change-style) since it only requires updating computed values from declarative animations. As a result, canceling the animation can cause a change to be observed and transitions to be fired.

I'm not exactly sure why the bug doesn't reproduce in Blink. Perhaps it is reflecting the changes to the style attribute as part of producing the before-change style?

I think we need to specify that `commitStyles` should somehow cause the computed style to be synchronously updated as a result of updating the style attribute—or somehow indicate that `commitStyles` followed by cancelling an animation should not trigger a transition. We'll may need to refine this wording when we tackle #5394, however.

/cc @flackr @graouts @emilio @canalun @vmpstr

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11084 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 25 October 2024 01:29:36 UTC