Skip to content

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

Open
@bramus

Description

@bramus

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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions