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

• Component: Animations
• Status: RESOLVED DUPLICATE

[Bramus]

(This bug was discovered while building `@bramus/style-observer`, a library that responds to changes in computed styles. For this it relies on CSS Transitions and `transition-behavior: allow-discrete`. See https://brm.us/style-observer for details about this library.)

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

- Demo: https://allow-discrete-bugs.netlify.app/safari/registered-discrete-loop/ – the custom properties `--variable1` and `--variable2` are registered with @property. The former as a `<number>` and the latter as a `<custom-ident>`
- 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, which leads me to believe that this behavior shows for all syntaxes that cannot be interpolated.

Tested in Safari Technology Preview 202

[Bramus]

Correction: the `--variable2` property is registered as `*`.

When having it set up as a `<custom-ident>` (with a proper `initial-value`) it works fine.

[Antoine Quint]

Hi Bramus, thanks for the report. I'll probably get to it myself eventually, but could you perhaps make a reduction that does not involve any third-party script? It could help reduce the complexity and help identifying the source of the bug. Thank you.

[Antoine Quint]

This is the same underlying issue as bug 279012.

*** This bug has been marked as a duplicate of bug 279012 ***