Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

iOS Safari: Scroll is not working #124

Open
RenaudRohlinger opened this issue Apr 13, 2023 · 5 comments
Open

iOS Safari: Scroll is not working #124

RenaudRohlinger opened this issue Apr 13, 2023 · 5 comments
Labels
bug Something isn't working

Comments

@RenaudRohlinger
Copy link
Member

No description provided.

@RenaudRohlinger RenaudRohlinger added the bug Something isn't working label Apr 13, 2023
@benjaminrobinet
Copy link

benjaminrobinet commented Apr 14, 2023

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:

screen-record.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
Copy link
Member Author

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
Copy link

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

@clementroche
Copy link

clementroche commented Apr 15, 2023

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
Copy link

dsimonow commented May 27, 2023

any idea how to use the adjusted scroll component with nextjs13 and its app router?
Posting here because the other issue #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

  • 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 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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

4 participants