Description
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.
// 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