[BUG] translateY based on scroll is jumping on mobile browsers

[delyan-peev]

1. Read the FAQs 👇 Read, do not believe they mention this.

2. Describe the bug

Hey there, I have a problem with a translateY transform on scroll jumping on mobile devices. I am fully aware that I might be doing something wrong. I believe the issue could be related to the mobile browsers resizing and me using 100vh/50vh for some containers, however I could not find another solution that works well.

Please, let me know if there is a better way to achieve what I am doing.

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug

A CodeSandbox minimal reproduction will allow us to quickly follow the reproduction steps. Without one, this bug report won't be accepted.

CSB: https://codesandbox.io/p/sandbox/framer-motion-translate-y-3clhz2?file=%2Fsrc%2FApp.tsx%3A1%2C1-56%2C1

4. Steps to reproduce

Steps to reproduce the behavior:

1. Open a web page with the component in question on mobile (reproduced it both on Chrome and Safari, iPhone 15 Pro and an Android device as well)
2. Scroll down
3. Watch it "jump" (you can also check the video below)

5. Expected behavior

I expect it to behave the way it does on desktop where the animation is very fluid.

6. Video or screenshots

https://github.com/framer/motion/assets/19203780/37d792ab-f5df-49b8-b716-0b60604ed702

7. Environment details

iPhone Pro 15 framer-motion 11.0.3

[Larkify]

Hi delyan, did you ever find a fix for this? I'm experiencing the exact same issue on my production site: https://larkx.xyz/

[Larkify]

It's somewhat disappointing that such a huge issue is being ignored by Framer

[rielAsh24]

I've been facing a similar issue on my site as well. In my case, it occurs while performing scroll based animations. Hoping this gets fixed sooner

Hi delyan, did you ever find a fix for this? I'm experiencing the exact same issue on my production site: https://larkx.xyz/

[piscopancer]

same issue here, useScroll values work smoothly on desktop, lagging in mobile browsers

[nboliver-ventureweb]

Also experiencing this issue, but with the latest [email protected] Reduced test case of the issue is here: https://codesandbox.io/p/sandbox/headless-moon-9dt5n8?file=%2Fsrc%2FApp.js and you can view the bug on your phone here: https://9dt5n8.csb.app/

[nemico96]

I'm also experiencing the same issue with [email protected]. However I'm experiencing the issue not only on phone, but also in Safari / Chrome on MacBook Pro M3 Pro. Hoping for a fix soon!