W3C home > Mailing lists > Public > public-css-archive@w3.org > February 2019

[csswg-drafts] [web-animations-1] Animatable.animate() should not flush (#3613)

From: Brian Birtles via GitHub <sysbot+gh@w3.org>
Date: Tue, 05 Feb 2019 06:09:15 +0000
To: public-css-archive@w3.org
Message-ID: <issues.opened-406643377-1549346954-sysbot+gh@w3.org>
birtles has just created a new issue for https://github.com/w3c/csswg-drafts:

== [web-animations-1] Animatable.animate() should not flush ==
From [Mozilla bug 1524480](https://bugzilla.mozilla.org/show_bug.cgi?id=1524480#c15):

It turns out that whether or not Element.animate flushes is observable (and it doesn't flush in Blink but does in Gecko and WebKit).

Suppose we have:

```css
div {
  opacity: 0.1;
  transition: 1s opacity linear;
}
```

And then we do:

```js
getComputedStyle(div).opacity;
```

At this point the computed opacity of `div` is 0.1.

Now, suppose we update the specified opacity to 0.2 but DON'T flush style:

```js
div.style.opacity = '0.2';
```

Then trigger an animation on the same element:

```js
div.animate({ opacity: [0.6, 1] }, 1000);
```

At this point if `Element.animate()` flushes style it will cause us to trigger a transition from 0.1 to 0.2.

However, if `Element.animate()` does NOT flush style we will:

* Generate a new `Animation` animating from 0.6 to 1.
* Then on the next restyle we will have a [before-change style](https://drafts.csswg.org/css-transitions/#before-change-style) opacity of 0.6 (since we bring declarative animations up-to-date as part of calculating the before-change style).
* And we we also have an after-change style of 0.6 (for the same reason).

Since the before-change style and after-change style have not changed, no transition will be generated.

Test case: https://codepen.io/birtles/pen/YBxxBd

I propose we spec that `Animatable.animate()` (and similarly `KeyframeEffect.setKeyframes()`, etc.) do _not_ flush style (or, in CSS transitions spec terms, trigger a [style change event](https://drafts.csswg.org/css-transitions/#style-change-event)).

The reason is that if we require UAs to flush, it would mean that `Element.animate()` both flushes AND dirties style. As a result, if the author triggers a number of animations in a single animation frame, the browser would be required to flush multiple times per frame.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3613 using your GitHub account
Received on Tuesday, 5 February 2019 06:09:17 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:41:43 UTC