Transition Doesn't Work on Chrome 115

[sxzz]

Vue version

3.3.4

Link to minimal reproduction

https://play.vuejs.org/#eNpVkEFuwyAQRa8yZZNWqkPVpUui9g5ZsqFonKBiQDCmiizfvRBQlK7gD/89jVjZVwj7vCAbmUg6mkCQkJZwlM7MwUeCFSJOsMEU/Qy7Ut1JJ532LpXqxf/CoRaeKS74Ip3gzVL4EgjnYBVhSQDieyHyDj61NfrnIFmnn+op2fHkz2eLgrdaQ05RuWTI9FwmAfJgpk4X6oLWesHrwuWV/wMEf1igxERXW6/7PKAjjIPSZDK+3iYWVcY+gbXa6O4awQelDV3hPQGqhB/SbVV5N9XfefSQb47OjfDWkPI/tyXY9gczJYXq

Steps to reproduce

• Open the Playground
• Click Toggle

What is expected?

disappear slowly

What is actually happening?

disappear immediately

System Info

No response

Any additional comments?

This is a browser compat problem, Chrome Canary/Chromium has changed the default value of animation-duration in the latest version.

Related

• [css-animations-2] Should the initial value for animation-duration be auto? w3c/csswg-drafts#6530
• chromium/chromium@9f26d47

[Justineo]

To temporarily workaround this, prepend the stylesheet with:

* {
  animation-duration: 0s;
}

[baiwusanyu-c]

In the latest discussion it was decided to keep the default value of 0s due to compatibility issues
w3c/csswg-drafts#6530 (comment)
However, the development version of Google Chrome in version 116 has not been modified yet.

[Justineo]

keep the default value of 0s

If I understand correctly, the default value is still changed to auto but getComputedStyle will return 0s.

[baiwusanyu-c]

keep the default value of 0s

If I understand correctly, the default value is still changed to auto but getComputedStyle will return 0s.

yes 😂

[sxzz]

@yyx990803 96c76fa won't fix this issue. auto doesn't equal to 0. The specific value will be calculated by browser.

[yyx990803]

AFAIK auto is only meant for group animations and scroll animations, and is considered to be same as 0 for "normal animations", which is currently what Vue transitions are used for.

The actual use case for auto is still yet to be implemented by the browser, and we can consider how to properly support those cases if they can also be used with Vue's transition system. But until then, this is what is needed to avoid the auto value breaking all existing Vue transition usage.

[Justineo]

Chrome is about to implement backward compat for Vue:

https://bugs.chromium.org/p/chromium/issues/detail?id=1452130#c5

It seems that the breakage won't land in the stable channel.

[yyx990803]

Yes, so in our case auto would be effectively equal to 0s - the fix would still be a safety net for users using Chrome Canary right now, or other browsers that may interpret the spec differently and do not implement the compat behavior like Chrome does.

[edison1105]

fixed via https://chromium-review.googlesource.com/c/chromium/src/+/4607459