[csswg-drafts] [css-transitions] The effect of `transition-behavior` also depends on the values attempting transition, not just the properties (#11612)

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

== [css-transitions] The effect of `transition-behavior` also depends on the values attempting transition, not just the properties ==
https://drafts.csswg.org/css-transitions-2/#transition-behavior-property

> When `normal` is specified, transitions will not be started for discrete properties, only for interpolable properties. When allow-discrete is specified, transitions will be started for discrete properties as well as interpolable properties.

But `transition-behavior` doesn't just affect properties with a discrete animation type. The effect depends on the values that attempt transition.

For example, [`width`](https://drafts.csswg.org/css-sizing-3/#propdef-width) has a "by computed value" animation type, but some values aren't interpolable so they fall back to discrete. Then `transition-behavior` comes into play:

```html
<!DOCTYPE html>
<style>
#a, #b {
  width: min-content;
  transition: width 3s -1s linear;
}
</style>
<div id="a" style="transition-behavior: normal"></div>
<div id="b" style="transition-behavior: allow-discrete"></div>
<pre id="pre"></pre>
<script>
document.addEventListener("transitionstart", (e) => {
  pre.append("transitionstart on #" + e.target.id + "\n");
})
document.body.offsetLeft;
a.style.width = b.style.width = "100px";
pre.append("#a has width: " + getComputedStyle(a).width + "\n");
pre.append("#b has width: " + getComputedStyle(b).width + "\n");
</script>
```

Gecko, Blink and Webkit produce

```
#a has width: 100px
#b has width: 0px
transitionstart on #b
```

Given the text in the spec, since `width` is not a discrete property, it may seem that a transition would start even with `transition-behavior: normal`. But it's not the case for the values used above.

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


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

Received on Thursday, 30 January 2025 16:48:37 UTC