From 147632f929ba9975c4b4d56ef6b75e720041c006 Mon Sep 17 00:00:00 2001
From: Shu Ding <g@shud.in>
Date: Thu, 24 Dec 2020 14:37:50 +0800
Subject: [PATCH] improve the detection algorithm to consider touch area

---
 components/product/ProductSlider/ProductSlider.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/components/product/ProductSlider/ProductSlider.tsx b/components/product/ProductSlider/ProductSlider.tsx
index d71542f17..0756edcda 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!