ScrollControls on iOS

[klader-digital]

• three version: ^0.164.1
• @react-three/fiber version: ^8.16.7,
• @react-three/drei version: ^9.106.0
• node version: 22.1.0
• npm (or yarn) version: 10.7.0

Problem description:

When making use of the infinite scroll feature of ScrollControls on iPhone (iOS), it seems to be uncontrollable when scrolling towards the top of the screen (see media).

Relevant code:

https://codesandbox.io/embed/pmkh9n

function App() {
    return (
        <Canvas camera={{position: [0, 0, 10], fov: 15}}>
            <ScrollControls
                infinite
                pages={16}
            >
                <Carousel/>
            </ScrollControls>
        </Canvas>
    )
}

function Carousel(props) {
    const ref = useRef()
    const scroll = useScroll()

    useFrame((state, delta) => {
        ref.current.rotation.z = -scroll.offset * (Math.PI * 2) // Rotate contents
    })

    return (
        <group ref={ref} {...props}>
            <mesh>
                <planeGeometry args={[1, 1]}/>
                <meshBasicMaterial
                    color={'#000000'}
                />
            </mesh>
        </group>
    )
}

bug_scrollcontrols_ios.mp4