This page contains a bunch of bug reports related to `transition-behavior: allow-discrete`

All demos use @bramus/style-observer which set up a transitionstart listener on a bunch of properties that are being tracked. See https://brm.us/style-observer for details on how this library works.

In all of the demos it is expected that clicking any button updates the output shown underneath the button row.

# Chrome Bugs

Tested in Chrome 130.0.6692.0 (Official Build) canary (arm64)

Unregistered Custom Properties don’t trigger a `transitionstart`

Demo: chrome/unregistered-no-transition/ – the custom properties --variable1 and --variable2 are not registered.
Expected behavior: When clicking the --variable1 or --variable2 buttons, the output should change.
Actual Behavior: Nothing happens because no transitions get triggered.
Noteworthy: You can work around this by registering the custom properties using @property, but that only works in some cases (see next bug).
Bug Report: https://crbug.com/360159391

# Firefox Bugs

Tested in Firefox Nightly 131.0a1 (2024-09-01) (aarch64)

Transitioning `display` does not trigger a `transitionstart`

Demo: firefox/display-no-transition/
Expected behavior: When clicking the display button the output should update.
Actual Behavior: Nothing Happens because no transitionstart gets fired.
Noteworthy: N/A
Bug Report: https://bugzilla.mozilla.org/show_bug.cgi?id=1916200

When first setting the value of a unregistered custom property, no `transitionstart` is triggered

Demo: firefox/unregistered-no-transition/ – the custom property --variable2 is not registered with @property and is currently not part of any declaration.
Expected behavior: Clicking the --variable2 button updates the output
Actual Behavior: The first click does nothing. All successive clicks do trigger the transition.
Noteworthy: Not sure if it is specced what should happen here. As an author, I’d like to get notified of this change though.
Bug Report: https://bugzilla.mozilla.org/show_bug.cgi?id=1916214

Registered Custom Properties with syntaxes that can be interpolated rarely trigger a `transitionstart`

Demo: firefox/registered-no-transition/ – the custom properties --variable1 and --variable2 are registered with @property. The former as a <number> and the latter as a <custom-ident>
Expected behavior: Clicking the --variable1 button updates the output
Actual Behavior: It doesn’t, or only rarely does, when rage clicking the button
Noteworthy: Triggering the --variable2 button does always update trigger a transitionstart which leads me to believe the bug is limited to syntaxes that can be interpolated.
Bug Report: https://bugzilla.mozilla.org/show_bug.cgi?id=1916203

# Safari Bugs

Tested in Safari Technology Preview 202

Transitioning Unregistered Custom Properties cause a transition loop

Demo: safari/unregistered-loop/ – the custom properties --variable1 and --variable2 are not registered.
Expected behavior: When clicking the --variable1 or --variable2 buttons, the output should change and the transition should have triggered only once.
Actual Behavior: While the output does change, the transition is repeatedly triggered. You can verify this by checking the console, which logs "_handleUpdate" on transitionstart
Noteworthy
Bug Report: https://bugs.webkit.org/show_bug.cgi?id=279012

Transitioning Registered Custom Properties with discretely animatable syntaxes cause a transition loop

Demo: safari/registered-discrete-loop/ – the custom properties --variable1 and --variable2 are registered with @property. The former as a <number> and the latter as a *
Expected behavior: When clicking the --variable2 button, the output should change and the transition should have triggered only once.
Actual Behavior: While the output does change, the transition is repeatedly triggered. You can verify this by checking the console, which logs "_handleUpdate" on transitionstart. This does not happen when clicking the --variable1 button.
Noteworthy: When changing --variable2 to a syntax of <string> it also doesn’t work but changing it to <custom-ident> (and changing the initial-value) does work.
Bug Report: https://bugs.webkit.org/show_bug.cgi?id=279013

Noteworthy: Custom Properties registered with a `<custom-ident>` syntax

The only Custom Property syntax that seems to work well across the board is custom-ident (see reference demo). You could use this if you want to respond to string-like values but note that these cannot start with a number (read: you can’t use this syntax to directly store numbers).

This page contains a bunch of bug reports related to transition-behavior: allow-discrete

# Chrome Bugs

Unregistered Custom Properties don’t trigger a transitionstart