Merge branch 'fix-grid' into develop

CHANGELOG.md

@@ -46,6 +46,7 @@ _Breaking developer changes, which may affect downstream projects or sites that
 * Fix unsolvable validator error triggered by regional presets ([#10459])
 * Render highway direction cones only on matching parent ways ([#9013])
 * Prevent edit menu from being covered up by street level imagery or other map overlay panels ([#10495])
+* Fix grid lines from showing up on background map tiles in certain situations (semi-transparent tiles or fractional browser zoom level) ([#10594], thanks [@Nekzuris]) 
 #### :earth_asia: Localization
 * Update Sinitic languages in the Multilingual Names field ([#10488], thanks [@winstonsung])
 * Update the list of languages in the Wikipedia field ([#10489])
@@ -62,7 +63,9 @@ _Breaking developer changes, which may affect downstream projects or sites that
 [#10488]: https://github.com/openstreetmap/iD/pull/10488
 [#10489]: https://github.com/openstreetmap/iD/pull/10489
 [#10495]: https://github.com/openstreetmap/iD/issues/10495
+[#10594]: https://github.com/openstreetmap/iD/pull/10594
 [@winstonsung]: https://github.com/winstonsung/
+[@Nekzuris]: https://github.com/Nekzuris
 
 
 # 2.30.4

css/80_app.css

@@ -4373,6 +4373,20 @@ img.tile {
     overflow: hidden;
 }
 
+/* Workaround to remove visible grid around tile borders on Chrome
+   Only works with browser zoom multiple of 25 (75%, 100%, 125%...) 
+   Should be removed when https://issues.chromium.org/issues/40084005 is resolved.
+   See https://github.com/openstreetmap/iD/pull/10594 */
+@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;
+    }
+}
+
 img.tile-removing {
     opacity: 0;
     z-index: 1;

modules/renderer/tile_layer.js

@@ -15,11 +15,30 @@ export function rendererTileLayer(context) {
     var _tileOrigin;
     var _zoom;
     var _source;
-
+    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
+    // See https://github.com/openstreetmap/iD/pull/10594
+    if (window.chrome) {
+        updateEpsilon();
+        window.addEventListener('resize', updateEpsilon);
+    }
+    function updateEpsilon() {
+        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;
+        }
+    }
 
     function tileSizeAtZoom(d, z) {
-        var EPSILON = 0.002;    // close seams
-        return ((d.tileSize * Math.pow(2, z - d[2])) / d.tileSize) + EPSILON;
+        return ((d.tileSize * Math.pow(2, z - d[2])) / d.tileSize) + _epsilon;
     }