improve the detection algorithm to consider touch area

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!