Disable auto-zoom on WebKit

Our usage of CSS zoom messes up D&D on WebKit because of:

  https://bugs.webkit.org/show_bug.cgi?id=77998

As zoom is more a nice to have, let's just disable it for WebKit and enable it
for more recent versions when it gets fixed.

diff --git a/public/trivabble.js b/public/trivabble.js
index 545892d96e9fcb3d01675512abb41a1debbb3c5b..247681edc658689c4aa7796cf0bc2bfe338f1c98 100644 (file)
--- a/public/trivabble.js
+++ b/public/trivabble.js
@@ -2734,6 +2734,15 @@
         startGame(getSetting("GameNumber"));
     }
 
+    // https://rnwest.engineer/detect-webkit/
+    function isWebKit() {
+        const ua = navigator.userAgent;
+        // As far as I can tell, Chromium-based desktop browsers are the only browsers
+        // that pretend to be WebKit-based but aren't.
+        return (/AppleWebKit/.test(ua) && !/Chrome/.test(ua)) ||
+                /\b(iPad|iPhone|iPod)\b/.test(ua);
+    }
+
     function initBoard() {
         const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
         const def = BoardList[getSetting("BoardLabel")];
@@ -2813,7 +2822,10 @@
         }
 
         setCellCaptions(getSetting("CELL_CAPTIONS"));
-        if (window.CSS && CSS.supports && CSS.supports("zoom: 1.5")) {
+        if (window.CSS && CSS.supports && CSS.supports("zoom: 1.5") && !isWebKit()) {
+            // We zoom the window so the board is as big as possible
+            // Except on WebKit because we are affected by the following bug,
+            // which fucks up d&d: https://bugs.webkit.org/show_bug.cgi?id=77998
             resize();
             window.removeEventListener("resize", resize);
             window.addEventListener("resize", resize);