diff --git a/CHANGELOG.md b/CHANGELOG.md index c23bb38ca..85a03f38d 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/css/80_app.css b/css/80_app.css index 2cb6d3d46..afc58418f 100644 --- a/css/80_app.css +++ b/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; diff --git a/modules/renderer/tile_layer.js b/modules/renderer/tile_layer.js index 90fc7aca3..5feac6b56 100644 --- a/modules/renderer/tile_layer.js +++ b/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; }