Transition Doesn't Work on Chrome 115
Vue version
3.3.4
Link to minimal reproduction
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
To temporarily workaround this, prepend the stylesheet with:
* {
animation-duration: 0s;
}
In the latest discussion it was decided to keep the default value of 0s due to compatibility issues
https://github.com/w3c/csswg-drafts/issues/6530#issuecomment-1581661556
However, the development version of Google Chrome in version 116 has not been modified yet.
keep the default value of
0s
If I understand correctly, the default value is still changed to auto but getComputedStyle will return 0s.
keep the default value of
0sIf I understand correctly, the default value is still changed to
autobutgetComputedStylewill return0s.
yes 😂
@yyx990803 96c76facb7de37fc241ccd55e121fd60a49a1452 won't fix this issue. auto doesn't equal to 0. The specific value will be calculated by browser.
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.
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.
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.
