Open rossrossp opened 3 months ago
Just found this as well. ScrollControls is super noticeable.
For easy replication, try this in Safari: https://codesandbox.io/p/sandbox/useintersect-and-scrollcontrols-gsm1y?file=%2Fsrc%2Findex.js
fwiw on ScrollControls I'm only seeing this jitter on iOS
Just discovered this as well. I was getting jitter in Safari and inertia in Chrome. After doing some digging and looking at a few examples I noticed something. Have a look at the following Code Sandbox:
https://codesandbox.io/s/bp6tmc
Notice the App.js uses a smooth scrolling package called @studio-freight/lenis, and it calls addEffect from @react-three/fiber to implement the Lenis instance. Also notice that the Lenis instance has { syncTouch: true } set.
The example has no jitter and no inertia, but as soon as you comment the two lines out with the Lenis instance and the addEffect, the jitter/inertia then become visible. I'm not sure why Lenis makes the jitter go away, but it's a fix for anyone looking.
I managed to fix the jitter and inertia in my own application by using ReactLenis with the useLenis hook instead of regular lenis. Hopefully this gets you further!
three
version: 0.162.0@react-three/fiber
version: 8.15.19@react-three/drei
version: 9.102.3node
version: v20.11.1npm
(oryarn
) version: 10.2.4Problem description:
Scrolling a list of Views and letting go so that the inertia continues, on Safari (iPhone or macOS), results in jittering of the Views, and a slight difference in offset between the View elements and the normal UI elements.
https://github.com/pmndrs/drei/assets/6325131/cea12a4b-ad0b-44df-b719-46574797097f
Relevant code:
Suggested solution:
The effect isn't as pronounced in Chrome and Firefox, so perhaps analysis could start with the difference between them. Edit: Chrome on an iPhone has some jitter, where chrome in macOS doesn't.