iOS Safari: Scroll is not working

[RenaudRohlinger]

[benjaminrobinet]

The scroll got "disabled" on touch devices due to the touch-action: none; on the Layout (haven't found where it is applied as it is not in the Layout itself). But the real issue here is not so much that the scroll is "not working". It is that the RAF will not be in sync with the scroll. So we end up with a latency like that:

https://user-images.githubusercontent.com/2086507/231982585-e072a277-3287-4b54-89c6-67af2f4308e9.mp4

In fact this problem can occur on every devices that don't have the scroll in sync with the RAF. Like Safari on Macs with ProMotion ?

The "only" solution that I have in mind, and that we are using for years now: custom / virtual scroll handled by the app.

[RenaudRohlinger]

Thanks for this @benjaminrobinet. I agree with the virtual scroll being the only solution for the moment. This is why I was interested in shipping lenis by default (/cc @clementroche).

It seems that there are a few options related to this: https://github.com/14islands/r3f-scroll-rig

[benjaminrobinet]

@RenaudRohlinger Lenis could be a good idea with the smoothTouch option enabled. But for now, this option is not really well implemented.

[clementroche]

I've pushed a syncTouch prop in v1.0.11, you can try it live on https://lenis.studiofreight.com/. The idea is to mimic native touch scroll while allowing webgl/dom sync

[dsimonow]

any idea how to use the adjusted scroll component with nextjs13 and its app router? Posting here because the other issue https://github.com/pmndrs/react-three-next/pull/123 is closed but they are related since it is about the same symptom

I tried following the suggested // 1 - wrap <Component {...pageProps} /> with <Scroll /> in _app.jsx

• I wrapped basicaly everything of the page function with the Scroll component that caused the error that "div" isn't part of the three library

// 2 - add <ScrollTicker /> wherever in the canvas

• I added ScrollTicker in the scene.tsx

not really sure how to procede since the first error stops it. or is it because of "// TODO refactor for app-directory" that the scroll component straight up can't work with the new app router?