Hello,
I came across an annoying bug with a medium-size app we are developing with vue3 in Chrome 84.
It was super hard to pin point the exact set of conditions that makes this bug happen but I managed to create a rather minimal reproduction.
To reproduce you have to run the app:
yarn && yarn dev
Type a letter in the search bar above the table.
See the loading spinner is frozen and your PC is unresponsive for a couple of seconds.
Smooth transition without performance issue.
I recorded two videos here: https://gofile.io/d/L9GEx6
where you can see expected vs happening.
What is actually happening?
When opening the devtools, it seems like the spinner is being updated in the DOM (maybe caught in some update loop where it should not).
It can't reproduce this bug in Firefox nor in Chrome Canary, which is why it is maybe a Chromium bug. However, it feels like a code smell. I spend a lot of time to trim my app, in order to share it with you guys, so please disregard the code quality, a lot of things in there are just leftovers :)
It was really tough to reproduce the exact set of conditions because sometimes you change a simple thing that seems unrelated (like a css class) and POUF the bug is gone.
I can workaround this bug by removing a few lines of CSS, or change this line. That makes me wonder if this is due to a bug in the Transition component or maybe in the way css is injected in the DOM. Final note: this happens in production as well.
Version
3.0.0-rc.5
Reproduction link
https://github.com/AlexandreBonaventure/vue-animation-bug
Steps to reproduce
Hello, I came across an annoying bug with a medium-size app we are developing with vue3 in Chrome 84.
It was super hard to pin point the exact set of conditions that makes this bug happen but I managed to create a rather minimal reproduction. To reproduce you have to run the app:
yarn && yarn dev
I deployed a review link directly here: https://5f2720bae05c45ce9df3c014--brave-bohr-c6013e.netlify.app/
What is expected?
Smooth transition without performance issue. I recorded two videos here: https://gofile.io/d/L9GEx6 where you can see expected vs happening.
What is actually happening?
When opening the devtools, it seems like the spinner is being updated in the DOM (maybe caught in some update loop where it should not).
It can't reproduce this bug in Firefox nor in Chrome Canary, which is why it is maybe a Chromium bug. However, it feels like a code smell. I spend a lot of time to trim my app, in order to share it with you guys, so please disregard the code quality, a lot of things in there are just leftovers :) It was really tough to reproduce the exact set of conditions because sometimes you change a simple thing that seems unrelated (like a css class) and POUF the bug is gone. I can workaround this bug by removing a few lines of CSS, or change this line. That makes me wonder if this is due to a bug in the Transition component or maybe in the way css is injected in the DOM. Final note: this happens in production as well.