Work around Chrome 102 wheel scrolling bug

Closes #6923 See https://discuss.codemirror.net/t/scrolling-issues-on-latest-google-chrome/4444
codemirror · May 30, 2022 · 1c58686 · 1c58686 · krystian3w · Jun 24, 2022
1 parent 17897ea
commit 1c58686
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/src/display/scroll_events.js b/src/display/scroll_events.js
@@ -1,4 +1,4 @@
-import { chrome, gecko, ie, mac, presto, safari, webkit } from "../util/browser.js"
+import { chrome, chrome_version, gecko, ie, mac, presto, safari, webkit } from "../util/browser.js"
 import { e_preventDefault } from "../util/event.js"
 
 import { updateDisplaySimple } from "./update_display.js"
@@ -40,6 +40,17 @@ export function wheelEventPixels(e) {
 }
 
 export function onScrollWheel(cm, e) {
+  // On Chrome 102, viewport updates somehow stop wheel-based
+  // scrolling. Turning off pointer events during the scroll seems
+  // to avoid the issue.
+  if (chrome && chrome_version >= 102) {
+    if (cm.display.chromeScrollHack == null) cm.display.sizer.style.pointerEvents = "none"
+    else clearTimeout(cm.display.chromeScrollHack)
+    cm.display.chromeScrollHack = setTimeout(() => {
+      cm.display.chromeScrollHack = null
+      cm.display.sizer.style.pointerEvents = ""
+    }, 100)
+  }
   let delta = wheelEventDelta(e), dx = delta.x, dy = delta.y
   let pixelsPerUnit = wheelPixelsPerUnit
   if (e.deltaMode === 0) {

diff --git a/src/util/browser.js b/src/util/browser.js
@@ -11,7 +11,8 @@ export let ie = ie_upto10 || ie_11up || edge
 export let ie_version = ie && (ie_upto10 ? document.documentMode || 6 : +(edge || ie_11up)[1])
 export let webkit = !edge && /WebKit\//.test(userAgent)
 let qtwebkit = webkit && /Qt\/\d+\.\d+/.test(userAgent)
-export let chrome = !edge && /Chrome\//.test(userAgent)
+export let chrome = !edge && /Chrome\/(\d+)/.exec(userAgent)
+export let chrome_version = chrome && +chrome[1]
 export let presto = /Opera\//.test(userAgent)
 export let safari = /Apple Computer/.test(navigator.vendor)
 export let mac_geMountainLion = /Mac OS X 1\d\D([8-9]|\d\d)\D/.test(userAgent)