pmndrs
[bug]: Swipe card on X axis will cause window to scroll when Youtube iframe is playing
Which react-spring target are you using?
- [X]
@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
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.
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
https://github.com/pmndrs/react-spring/assets/68360917/7f28ae92-a84c-4ed2-9abe-f17293ecd69b