make background map tile edges opaque

Replaces the workaround of the tile rendering issues on Chrome at odd zoom levels.

The svg filter `#alpha-slope5` alters the alpha channel of background tiles such that everything but (almost) transparent pixels are rendered fully opaque.

closes #10747

modules/renderer/tile_layer.js

@@ -16,30 +16,9 @@ export function rendererTileLayer(context) {
     var _zoom;
     var _source;
     var _underzoom = 0;
-    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) {
-        return ((d.tileSize * Math.pow(2, z - d[2])) / d.tileSize) + _epsilon;
+        return (d.tileSize * Math.pow(2, z - d[2])) / d.tileSize;
     }
 
 

modules/svg/defs.js

@@ -187,6 +187,29 @@ export function svgDefs(context) {
             .attr('width', function (d) { return d; })
             .attr('height', function (d) { return d; });
 
+        // add svg filters
+        const filters = _defsSelection.selectAll('filter')
+            .data(['alpha-slope5'])
+            .enter()
+            .append('filter')
+            .attr('id', d => d);
+        // Alters the alpha channel such that everything but
+        // (almost) transparent pixels are rendered fully opaque:
+        // This is used in a workaround for how chrome is rendering
+        // the edges of `img` elements when the page zoom is not a
+        // "round value": the semi-transparent pixels of neighboring
+        // tiles cannot "add up" to a fully opaque background layer.
+        // See https://github.com/openstreetmap/iD/issues/10747
+        // and https://github.com/openstreetmap/iD/pull/10594
+        const alphaSlope5 = filters.filter('#alpha-slope5')
+            .append('feComponentTransfer');
+        alphaSlope5.append('feFuncR').attr('type', 'identity');
+        alphaSlope5.append('feFuncG').attr('type', 'identity');
+        alphaSlope5.append('feFuncB').attr('type', 'identity');
+        alphaSlope5.append('feFuncA')
+            .attr('type', 'linear')
+            .attr('slope', 5);
+
         // add symbol spritesheets
         addSprites(_spritesheetIds, true);
     }