Blocking update loop in Chrome 84?

AlexandreBonaventure commented 4 years ago

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
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.
Wait a bit... everything is back to normal

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.

troy351 commented 4 years ago

Chrome 85 just released and it seems this bug was gone.

LinusBorg commented 3 years ago

confirmed

vuejs / core