Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
bramus opened this issue Sep 27, 2024 · 0 comments
Open
Labels
css-transitions-1 Current Work

Comments

@bramus
Copy link
Contributor

bramus commented Sep 27, 2024

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

@bramus bramus added the css-transitions-1 Current Work label Sep 27, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
css-transitions-1 Current Work
Projects
None yet
Development

No branches or pull requests

1 participant