Fix false positive webkit bug check on chrome (#18)

* Fixed check for WebKit bug with synthetic pointer events giving false-positive on Chrome * 0.4.8
wix-incubator · Feb 18, 2025 · 8691509 · 8691509
1 parent 6f83f9c
commit 8691509
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 52 deletions.
diff --git a/dist/index.cjs b/dist/index.cjs
@@ -95,29 +95,36 @@ function testPointerOffsetDprBug () {
 
 function testPointerOffsetScrollBug () {
   return new Promise((resolve) => {
-    function scrollHandler () {
-      if (window.scrollY > 0) {
-        window.removeEventListener('scroll', scrollHandler);
-
-        let fixRequired = false;
-
-        document.body.addEventListener('pointerdown', (e) => {
-          fixRequired = e.clientY === e.pageY;
-        }, { once: true });
+    const startY = window.scrollY;
+    let fixRequired = false;
+    let currentY;
+
+    function sampleOffsetY () {
+      document.body.addEventListener('pointerdown', (e) => {
+        if (currentY === undefined) {
+          currentY = e.offsetY;
+        } else {
+          // when dispatching on BODY in different scroll it gives the same offsetY value only on WebKit
+          fixRequired = e.offsetY === currentY;
+        }
+      }, { once: true });
 
-        const event = new PointerEvent('pointerdown', {
-          clientX: 10
-        });
+      const event = new PointerEvent('pointerdown', {
+        clientY: 500
+      });
 
-        document.body.dispatchEvent(event);
+      document.body.dispatchEvent(event);
+    }
 
+    function scrollHandler () {
+      if (window.scrollY !== startY) {
+        window.removeEventListener('scroll', scrollHandler);
+        sampleOffsetY();
         resolve(fixRequired);
       }
     }
 
-    if (window.scrollY > 0) {
-      scrollHandler();
-    }
+    sampleOffsetY();
 
     window.addEventListener('scroll', scrollHandler);
   });

diff --git a/docs/demo/index.js b/docs/demo/index.js
@@ -93,29 +93,36 @@ function testPointerOffsetDprBug () {
 
 function testPointerOffsetScrollBug () {
   return new Promise((resolve) => {
-    function scrollHandler () {
-      if (window.scrollY > 0) {
-        window.removeEventListener('scroll', scrollHandler);
-
-        let fixRequired = false;
-
-        document.body.addEventListener('pointerdown', (e) => {
-          fixRequired = e.clientY === e.pageY;
-        }, { once: true });
+    const startY = window.scrollY;
+    let fixRequired = false;
+    let currentY;
+
+    function sampleOffsetY () {
+      document.body.addEventListener('pointerdown', (e) => {
+        if (currentY === undefined) {
+          currentY = e.offsetY;
+        } else {
+          // when dispatching on BODY in different scroll it gives the same offsetY value only on WebKit
+          fixRequired = e.offsetY === currentY;
+        }
+      }, { once: true });
 
-        const event = new PointerEvent('pointerdown', {
-          clientX: 10
-        });
+      const event = new PointerEvent('pointerdown', {
+        clientY: 500
+      });
 
-        document.body.dispatchEvent(event);
+      document.body.dispatchEvent(event);
+    }
 
+    function scrollHandler () {
+      if (window.scrollY !== startY) {
+        window.removeEventListener('scroll', scrollHandler);
+        sampleOffsetY();
         resolve(fixRequired);
       }
     }
 
-    if (window.scrollY > 0) {
-      scrollHandler();
-    }
+    sampleOffsetY();
 
     window.addEventListener('scroll', scrollHandler);
   });

diff --git a/docs/reference/index.html b/docs/reference/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset='utf-8'>
-  <title>kuliso 0.4.6 | Documentation</title>
+  <title>kuliso 0.4.7 | Documentation</title>
   <meta name='description' content='Tiny library for performant pointer-driven or gyroscope-driven effects'>
   <meta name='viewport' content='width=device-width,initial-scale=1'>
   <link href='assets/bass.css' rel='stylesheet'>
@@ -15,7 +15,7 @@
       <div id='split-left' class='overflow-auto fs0 height-viewport-100'>
         <div class='py1 px2'>
           <h3 class='mb0 no-anchor'>kuliso</h3>
-          <div class='mb1'><code>0.4.6</code></div>
+          <div class='mb1'><code>0.4.7</code></div>
           <input
             placeholder='Filter'
             id='filter-input'

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "kuliso",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "sideeffects": true,
   "description": "Tiny library for performant pointer-driven or gyroscope-driven effects",
   "main": "dist/index.cjs",

diff --git a/src/utilities.js b/src/utilities.js
@@ -93,29 +93,36 @@ function testPointerOffsetDprBug () {
 
 function testPointerOffsetScrollBug () {
   return new Promise((resolve) => {
-    function scrollHandler () {
-      if (window.scrollY > 0) {
-        window.removeEventListener('scroll', scrollHandler);
-
-        let fixRequired = false;
-
-        document.body.addEventListener('pointerdown', (e) => {
-          fixRequired = e.clientY === e.pageY;
-        }, { once: true });
-
-        const event = new PointerEvent('pointerdown', {
-          clientX: 10
-        });
+    const startY = window.scrollY;
+    let fixRequired = false;
+    let currentY;
+
+    function sampleOffsetY () {
+      document.body.addEventListener('pointerdown', (e) => {
+        if (currentY === undefined) {
+          currentY = e.offsetY;
+        } else {
+          // when dispatching on BODY in different scroll it gives the same offsetY value only on WebKit
+          fixRequired = e.offsetY === currentY;
+        }
+      }, { once: true });
+
+      const event = new PointerEvent('pointerdown', {
+        clientY: 500
+      });
 
-        document.body.dispatchEvent(event);
+      document.body.dispatchEvent(event);
+    }
 
+    function scrollHandler () {
+      if (window.scrollY !== startY) {
+        window.removeEventListener('scroll', scrollHandler);
+        sampleOffsetY();
         resolve(fixRequired);
       }
     }
 
-    if (window.scrollY > 0) {
-      scrollHandler();
-    }
+    sampleOffsetY();
 
     window.addEventListener('scroll', scrollHandler);
   });