[Question] What is the reason for lagging scrolling WebGL elements on mobile?

[Fabiantjoeaon]

Hey! Thanks for this amazing library, its by far the best solution to combine DOM with WebGL without headaches.

I have a question, as this is in the documentation:

Consider disabling SmoothScrollbar and all scrolling WebGL elements on mobile - it is usually laggy.

I was wondering what the issue is thats causing this, and what other options there are to mitigate this except progressive enhancement / disabling WebGL for those elements?

Perhaps it has something to do with syncing Lenis to the canvas?

Thanks in advance!

[ffdead]

Hi @Fabiantjoeaon 👋 happy you find it useful!

Lenis is disabled on mobile by default as it is laggy to mimic the native scrolling using JavaScript.

The only way to perfectly sync the canvas and scrolling is to run the scroll on the JavaScript main thread - this is what Lenis does on desktop and it's usually fast enough to feel good.

You can force Lenis to be active on mobile too by setting syncTouch: true

It will scroll the content with js and sync the WebGL - but it can be laggy and the feel is different from the native scroll (though you can tweak the Lenis props to change the feel)

We use that sometimes, for instance on https://quantumwallet.tech/

[Fabiantjoeaon]

Thanks @ffdead that makes sense !