[csswg-drafts] [css-transitions] What is the transition start value for an unset property? (#10962)

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

== [css-transitions] What is the transition start value for an unset property? ==
This came up after having filed https://bugzilla.mozilla.org/show_bug.cgi?id=1916214, in which Firefox does not trigger a `transitionstart` event when _first_ setting the value of a unregistered custom property. Successively changing the custom property value does trigger a transition.

```js
// Set up transition listener
document.body.style.setProperty('transition', '--variable 0.001ms step-start allow-discrete');
document.body.addEventListener('transitionstart', console.log);

// Change value of --variable: No transitionstart gets triggered (in Firefox)
document.body.style.setProperty('--variable', 'hello');
getComputedStyle(document.body).getPropertyValue('--variable');

// Change value of --variable: A transitionstart gets triggered
document.body.style.setProperty('--variable', 'hello, again');
getComputedStyle(document.body).getPropertyValue('--variable');

// Change value of --variable: A transitionstart gets triggered
document.body.style.setProperty('--variable', 'hello, again once more');
getComputedStyle(document.body).getPropertyValue('--variable');
```

In the issue, @emilio and @borischiou hinted that this is not specified right now and needs some of the WG’s attention:

> This might be worth a spec issue... What is the transition start value for an unset property? I guess we could keep a null value or something, or mint an empty string? But feels quite odd.

>  We probably need a spec issue to define an initial value for transition purpose, or we should treat this custom property as no start value and so no transition.

I would have expected for a transition event to be fired here, as – in my perception – when first changing the property’s value it (discretely) transitions from `unset` to “hello”.

Sidenote: Chrome doesn’t trigger anything at all here because of https://crbug.com/360159391 and Safari Technology Preview 203 triggers a `transitionstart` upon first change but is stuck in a transition loop because of https://bugs.webkit.org/show_bug.cgi?id=279012 _(which is already fixed on main)_

/cc @graouts

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


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

Received on Friday, 27 September 2024 09:48:16 UTC