From 86915096c7830d356250424c802518cead2bbbce Mon Sep 17 00:00:00 2001
From: Yehonatan Daniv <maggotfish@gmail.com>
Date: Tue, 18 Feb 2025 14:48:03 +0200
Subject: [PATCH] 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
---
 dist/index.cjs            | 39 ++++++++++++++++++++++---------------
 docs/demo/index.js        | 39 ++++++++++++++++++++++---------------
 docs/reference/index.html |  4 ++--
 package.json              |  2 +-
 src/utilities.js          | 41 +++++++++++++++++++++++----------------
 5 files changed, 73 insertions(+), 52 deletions(-)

diff --git a/dist/index.cjs b/dist/index.cjs
index 78010d8..b23ad6c 100644
--- 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
index ea17b6d..367c025 100644
--- 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
index f904f26..ea9d1d4 100644
--- 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
index c1996e8..655c2d3 100644
--- 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
index 0b1aef2..0e57878 100644
--- 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);
   });