[BUG] useScroll jittery when using translateY on mobile

[nboliver-ventureweb]

1. Describe the bug

Trying to apply useScroll and useTransform to "pin" an element while scrolling, so that it gets transformed by the same amount that's scrolled. This works on desktop browsers, but on mobile it's jittery.

Example component:

import { motion, useScroll, useTransform } from 'framer-motion';
import { type PropsWithChildren, useRef } from 'react';

export function PinnedElement({ children }: PropsWithChildren) {
  const ref = useRef(null);
  const { scrollYProgress } = useScroll({
    target: ref,
    offset: ['end end', 'end start'],
  });
  const y = useTransform(scrollYProgress, [0, 1], ['0vh', '100vh']);

  return (
    <motion.div ref={ref} layout style={{ y }}>
      {children}
    </motion.div>
  );
}

2. CodeSandbox reproduction of the bug

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/

4. Steps to reproduce

Steps to reproduce the behavior:

1. Implement a component as in example above
2. Wrap some content in new component, ensuring there is more content below it
3. Scroll down to content and see it is "pinned"
4. Try on mobile and see the pinned content is jittery when scrolled

5. Expected behavior

Pinned content should be motionless / not jittery

6. Video or screenshots

If applicable, add a video or screenshots to help explain the bug.

7. Environment details

iOS 17.5.1

[BorisZubchenko]

Related #2716