search

pmndrs / react-three-next

React Three Fiber, Threejs, Nextjs starter
https://react-three-next.vercel.app/
MIT License
2.52k stars 342 forks source link

iOS Safari: Scroll is not working #124

Open RenaudRohlinger opened 1 year ago

benjaminrobinet commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

clementroche commented 1 year ago

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 commented 1 year ago

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 in _app.jsx

// 2 - add wherever in the canvas

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?