[bug]: Swipe card on X axis will cause window to scroll when Youtube iframe is playing

[juniorforlife]

Which react-spring target are you using?

• @react-spring/web
• @react-spring/three
• @react-spring/native
• @react-spring/konva
• @react-spring/zdog

What version of react-spring are you using?

9.7.3

What's Wrong?

I have this config for @react-spring/web and @use-gesture/react to implement swiping card animation

const [animatedProps, animatedApi] = useSpring(() => ({
    from: { x: 0, rot: 0 },
    onRest: (e) => {
      callApi();
    },
  }));

  const gestureProps = useGesture(
    {
      onDrag: ({ movement: [mx] }) => {
        if (dragEnabled.current) {
          animatedApi.start(() => ({
            x: mx,
            rot: Math.max(Math.min(mx / 10, 2), -2), // limit to -2deg and 2deg
            config: { friction: 50, tension: 600 },
          }));
        }
      },
      onDragEnd: ({ movement: [moveX] }) => {
        if (dragEnabled.current) {
          const shouldFlyOut = Math.abs(moveX) > 120;
          const direction = moveX > 0 ? 1 : -1; // 1 = right, -1 = left
          animatedApi.start(() => ({
            x: shouldFlyOut ? outOfScreenDistance.current * direction : 0,
            rot: 0,
            config: { duration: 500 },
          }));
        }
      },
    },
    { drag: { preventScroll: true } }
  );

return <animated.div
      className={`absolute h-full w-full`}
      {...gestureProps()}
      style={{
        x: animatedProps.x,
        transform: animatedProps.rot
          .to([-12, 12], [-12, 12])
          .to((value: any) => `rotateZ(${value}deg)`),
        zIndex,
        touchAction: "none",
      }}
>
<YoutubeIframe />
</animated.div>

The swipe animation works just fine but when I play the Youtube iframe and swipe to the far right, my screen scrolls as well. I set overflow-hidden but it still doesn't fix it.

To Reproduce

Play the Youtube video and start swipe gesture to the far right

Expected Behaviour

No screen scrolling

Link to repo

Please see code above

[joshuaellis]

Can you provide a codesandbox, it seems this YoutubeIframe is important to the bug you're experiencing and therefore it's important to have all the relevant information.

[juniorforlife]

Can you provide a codesandbox, it seems this YoutubeIframe is important to the bug you're experiencing and therefore it's important to have all the relevant information.

Sorry for the late reply. I just got back from a vacation. While trying to provide codesandbox, I realize the overflow-scroll issue happens even without the iframe. Meaning when I swipe the card, page scrolling will happen even if I set overflow to hidden.
The issue happens with the example repo as well https://codesandbox.io/s/to6uf

Screen.Recording.2023-09-24.at.23.04.42.mov

[juniorforlife]

@joshuaellis hello do you have any idea what this happens?