Infinite scroll keeps recalculating style (in both v1 and v2)

[krispern]

What happened?

Infinite scroll keeps recalculating style, thus keeping the CPU busy (constantly between 6-10%).

The element's stop method stops this from occurring and resume method makes it happen again.

What did you expect to happen?

Once the page is loaded, don't use CPU anymore. There shouldn't really be a need to endlessly do the same operations

Reproduction URL

https://quasar.dev/vue-components/infinite-scroll

How to reproduce?

1. Go to https://quasar.dev/vue-components/infinite-scroll
2. Open Task Manager
3. Note that the Chrome tab for the Infinite Scroll page is constantly using CPU

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Components (quasar)

Platforms/Browsers

Firefox, Chrome, Other

Quasar info output

No response

Relevant log output

No response

Additional context

I've only tested in Chrome (Version 108.0.5359.98) and Firefox (107.0.1 (64-bit)), there might be other browsers where this is failing.
Using Windows 10 Pro (Version 10.0.19045 Build 19045)

[github-actions]

Hi @krispern! 👋

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. 👏

[pdanpdan]

How did you find it's recalculating styles? And what styles?

[krispern]

From Chrome Dev Tools' Performance tab. The endlessly repeating part says "Recalculate style" and "Schedule style recalculation"

I also think the quasar.dev addresses should be allowed as a reproduction URL because I can't figure out how to get it to work on a Codepen without getting some CSP directive errors in the console, and the issue is also ON the quasar.dev site

[pdanpdan]

Nice catch :)

Until next release add this to your CSS

.invisible, .invisible *
  visibility: hidden !important
  transition: none !important
  animation: none !important

[krispern]

@pdanpdan The invisible doesn't seem to be matching anything, thus the change has no effect.

I used it as

<style>
	.invisible,
	.invisible * {
		visibility: hidden !important;
		transition: none !important;
		animation: none !important;
	}
</style>

In the same component where I'm using q-infinite-scroll

[pdanpdan]

Put it in the global css file - and it matches the loader when it's not active

[krispern]

I added the css to the global css file now. Looking at the element, it seems the styles are even applied. Unfortunately, that doesn't change anything as the animation/style calculation/CPU use is still continuing.

If there's a fix coming out soon, I can wait for that.

[rstoenescu]

Fix will be available in Quasar v2.10.3 and v1.22.3

[krispern]

I've checked the latest v1 and v2 on https://quasar.dev/vue-components/infinite-scroll

Either the fix didn't reach those releases or it's not fixed yet, since the same thing is still happening. Easiest test is to open Chrome Dev Tools -> Performance, then turn the recording on for a second (or longer) and then stop it.

The same style recalculation is constantly happening:

[rstoenescu]

Fix will be available in Quasar v2.11.4

[krispern]

Will the fix also be in v1? We're still using that

[rstoenescu]

Of course. And I've just released v1.22.4 right now.

Please be aware that we will be extending support for Quasar v1 one more time, for 6 months, but it's final.
Might be a good idea to start upgrading to Quasar v2.

[krispern]

Thank you for the release and the heads up. We are planning to upgrade to Vue 3, which is the requirement for Quasar v2, but our project is colossal and it's probably not going to happen this year.

[rstoenescu]

It's not that hard to upgrade to Vue 3, regardless of the project size, trust me. It might seem like a huge deal, but it isn't. You can still use Options API in Vue 3 which will significantly reduce the amount of work and will just leave it down to the small time breaking stuff in Vue 3. And we've kept 99% of the API in sync between Qv1 and Qv2.

[krispern]

I've checked the new version on your website. The issue is still not fixed in neither v1.22.4 nor v2.11.4. When checking the performance tab in Chrome Dev Tools, it's still showing the same "Schedule Style Recalculation" process. Since it's doing it every 16ms (60fps), could it be that it's trying to animate something? I might be mistaken though as I don't know how the Infinite Scroll works.

[rstoenescu]

Will be available in Quasar v2.11.5 and v1.22.5.