Q-img high Recalc per sec when the image hasn't been in the viewport

jobweegink commented 2 weeks ago

What happened?

I noticed high CPU usage while doing nothing in the browser. After some research I figured out that there are a lot of "Style recalcs / sec" being invoked by the browser. I could locate it to the quasar img (q-img) when the image hasn't been in the viewport it probably is showing an q-spin that recalcs the page due to it's animation.

What did you expect to happen?

"Style recalcs / sec" being 0 when the Q-img is not in the viewport

Reproduction URL

https://codepen.io/yellowq/pen/NWmVPQg

How to reproduce?

You can very easily reproduce this on the documentation website of Quasar itself.

Enable "Style recalcs / sec" in perfomance monitor of Chrome and load the page: https://quasar.dev/vue-components/img#introduction
Do nothing and see that the high amount of CPU and Style recalcs
Scroll down to the bottom of the page
Check "Style recalcs / sec" is now back to 0

Flavour

Vite Plugin (@quasar/vite-plugin)

Areas

Components (quasar)

Platforms/Browsers

Chrome

Quasar info output

Operating System        Darwin(23.3.0) - darwin/x64
NodeJs                  20.11.1

Global packages    
  NPM                   10.2.4
  yarn                  1.22.22
  @quasar/cli           2.0.1
  @quasar/icongenie     Not installed
  cordova               Not installed

Networking         
  Host                  MacBook-Pro.local
  en0                   192.168.0.69

Relevant log output

No response

Additional context

No response

github-actions[bot] commented 2 weeks ago

Hi @jobweegink! 👋

It looks like you provided an invalid or unsupported reproduction URL. Do not use any service other than Codepen, jsFiddle, StackBlitz, Codesandbox, and GitHub. Make sure the URL you provided is correct and reachable. You can test it by visiting it in a private tab, another device, etc. Please edit your original post above and provide a valid reproduction URL as explained.

Without a proper reproduction, your issue will have to get closed.

Thank you for your collaboration. 👏

jobweegink commented 2 weeks ago

It's not reproducible in a codepen bc it probs renders the page different. I've added one just to comply here. But i've added a perfect easy way to reproduce it to this ticket

quasarframework / quasar