From 28e7faa13bf57dbe68bc6b8a7a3a31193e6adf6e Mon Sep 17 00:00:00 2001
From: Louis Demange <48560751+Nekzuris@users.noreply.github.com>
Date: Tue, 17 Dec 2024 07:01:21 +0100
Subject: [PATCH] Apply plus-lighter only at specific zoom levels

---
 css/80_app.css                 | 10 +++++++---
 modules/renderer/tile_layer.js | 24 ++++++++++--------------
 2 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/css/80_app.css b/css/80_app.css
index 5671caa89..854b68c12 100644
--- a/css/80_app.css
+++ b/css/80_app.css
@@ -4369,9 +4369,13 @@ img.tile {
 }
 
 /* Workaround to remove visible grid around tile borders on Chrome */
-/* with exceptions for 110%, 90%, 80% and 67% browser zoom */
-/* https://issues.chromium.org/issues/40084005  https://github.com/Leaflet/Leaflet/pull/8891  https://github.com/openstreetmap/iD/pull/10594 */
-@media not ((1.09 < -webkit-device-pixel-ratio < 1.11) or (0.89 < -webkit-device-pixel-ratio < 0.91) or (0.79 < -webkit-device-pixel-ratio < 0.81) or (0.66 < -webkit-device-pixel-ratio < 0.68)) {
+/* Only works with browser zoom multiple of 25 (75%, 100%, 125%...) */
+/* Should be removed when https://issues.chromium.org/issues/40084005 is resolved */
+@media (-webkit-device-pixel-ratio = 1) or (-webkit-device-pixel-ratio = 1.25) or (-webkit-device-pixel-ratio = 1.5) or (-webkit-device-pixel-ratio = 1.75)
+    or (-webkit-device-pixel-ratio = 2) or (-webkit-device-pixel-ratio = 2.25) or (-webkit-device-pixel-ratio = 2.5) or (-webkit-device-pixel-ratio = 2.75)
+    or (-webkit-device-pixel-ratio = 3) or (-webkit-device-pixel-ratio = 3.25) or (-webkit-device-pixel-ratio = 3.5) or (-webkit-device-pixel-ratio = 3.75)
+    or (-webkit-device-pixel-ratio = 4) or (-webkit-device-pixel-ratio = 4.25) or (-webkit-device-pixel-ratio = 4.5) or (-webkit-device-pixel-ratio = 4.75) 
+    or (-webkit-device-pixel-ratio = 5) or (-webkit-device-pixel-ratio = 0.25) or (-webkit-device-pixel-ratio = 0.5) or (-webkit-device-pixel-ratio = 0.75) {
     .layer-background img.tile {
         mix-blend-mode: plus-lighter;
     }
diff --git a/modules/renderer/tile_layer.js b/modules/renderer/tile_layer.js
index 727fcea6e..34d2d08fb 100644
--- a/modules/renderer/tile_layer.js
+++ b/modules/renderer/tile_layer.js
@@ -18,25 +18,21 @@ export function rendererTileLayer(context) {
     var _epsilon = 0;
 
     // Workaround to remove visible grid around tile borders on Chrome with dynamic epsilon for specific browser zoom levels
-    // Should be removed when https://issues.chromium.org/issues/40084005 is resolved, https://github.com/openstreetmap/iD/pull/10594
+    // Should be removed when https://issues.chromium.org/issues/40084005 is resolved
     if (window.chrome) {
         updateEpsilon();
         window.addEventListener('resize', updateEpsilon);
     }
     function updateEpsilon() {
-        switch (Math.round(window.devicePixelRatio * 100)) {
-            case 110:
-                _epsilon = 0.002;
-                break;
-            case 90:
-                _epsilon = 0.005;
-                break;
-            case 80:
-            case 67:
-                _epsilon = 0.003;
-                break;
-            default:
-                _epsilon = 0;
+        const pageZoom = Math.round(window.devicePixelRatio * 100);
+        if (pageZoom % 25 === 0) {
+            _epsilon = 0; // uses mix-blend-mode: plus-lighter
+        } else if (pageZoom === 90) {
+            _epsilon = 0.005;
+        } else if (pageZoom === 110) {
+            _epsilon = 0.002;
+        } else {
+            _epsilon = 0.003;
         }
     }