Bug 279012 – Transitioning Unregistered Custom Properties cause a transition loop

• Status: RESOLVED
• Resolution: FIXED
• Component: Animations

[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 Unregistered Custom Properties cause a transition loop

- Demo: https://allow-discrete-bugs.netlify.app/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`

Tested in Safari Technology Preview 202

[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.

[Jake Archibald]

Here's a reduction https://output.jsbin.com/pejadit/3/quiet

[Jake Archibald]

Expected: A single transitionstart event for the single style change.
Actual: transitionstart appears to fire every frame thereafter.

[Antoine Quint]

That's excellent, thank you.

[Antoine Quint]

We enter this clause in `updateCSSTransitionsForStyleableAndProperty` for each style resolution: 

// 4. Otherwise, implementations must cancel the running transition and start a new transition whose:

I haven't worked out what is failing to take us here.

[Antoine Quint]

Presumably it's the propertyInStyleMatchesValueForTransitionInMap() call which returns false but it should return true.

[Antoine Quint]

CSSPropertyAnimation::propertiesEqual() returns falses with none of the if statements in the custom property variant being hit. I assume this is because this is an unregistered property and we don't know how to compare values.

[Jake Archibald]

I believe the bug also happens if the property is registered as "*". Maybe even <custom-ident> too.

[Bramus]

(In reply to Jake Archibald from comment #8)
> I believe the bug also happens if the property is registered as "*". Maybe
> even <custom-ident> too.

Yes, that would be https://bugs.webkit.org/show_bug.cgi?id=279013

It happens for `"*"` but not for `"<custom-ident>"`, though.

[Antoine Quint]

*** Bug 279013 has been marked as a duplicate of this bug. ***

[Antoine Quint]

Pull request: https://github.com/WebKit/WebKit/pull/33061

[Antoine Quint]

Submitted web-platform-tests pull request: https://github.com/web-platform-tests/wpt/pull/47939

[EWS]

Committed 283099@main (7f45cbdcfbf5): <https://commits.webkit.org/283099@main>

Reviewed commits have been landed. Closing PR #33061 and removing active labels.

[Radar WebKit Bug Importer]

<rdar://problem/135205514>

[Jake Archibald]

Thank you for fixing this so quickly!

[Antoine Quint]

Thanks for filing with a simple test case, that's a lot of the work towards a fix already done :)