Q-img high Recalc per sec when the image hasn't been in the viewport
jobweegink opened this issue · comments
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
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. 👏
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