diff --git a/components/product/ProductSlider/ProductSlider.tsx b/components/product/ProductSlider/ProductSlider.tsx index d71542f176..0756edcdae 100644 --- a/components/product/ProductSlider/ProductSlider.tsx +++ b/components/product/ProductSlider/ProductSlider.tsx @@ -21,9 +21,19 @@ const ProductSlider: FC = ({ children }) => { // Stop the history navigation gesture on touch devices useEffect(() => { const preventNavigation = (event: TouchEvent) => { + // Center point of the touch area const touchXPosition = event.touches[0].pageX - if (touchXPosition > 10 && touchXPosition < window.innerWidth - 10) return - event.preventDefault() + // Size of the touch area + const touchXRadius = event.touches[0].radiusX || 0 + + // We set a threshold (10px) on both sizes of the screen, + // if the touch area overlaps with the screen edges + // it's likely to trigger the navigation. We prevent the + // touchstart event in that case. + if ( + touchXPosition - touchXRadius < 10 || + touchXPosition + touchXRadius > window.innerWidth - 10 + ) event.preventDefault() } sliderContainerRef.current!