From b2c51929c6943c556608b73024490e18797a625e Mon Sep 17 00:00:00 2001 From: Nekzuris <48560751+Nekzuris@users.noreply.github.com> Date: Wed, 11 Dec 2024 02:30:38 +0100 Subject: [PATCH 1/6] Fix visible grid around tiles --- css/80_app.css | 5 ++++- modules/renderer/tile_layer.js | 3 +-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/css/80_app.css b/css/80_app.css index e4208e0d9c..1f7bb14612 100644 --- a/css/80_app.css +++ b/css/80_app.css @@ -4367,7 +4367,10 @@ img.tile { opacity: 1; transition: opacity 120ms linear; } - +.layer-background img.tile { + /* Fix visible grid around tiles borders on Chrome */ + 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 90fc7aca3c..5f98c0ea1c 100644 --- a/modules/renderer/tile_layer.js +++ b/modules/renderer/tile_layer.js @@ -18,8 +18,7 @@ export function rendererTileLayer(context) { 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); } From 4aac70f71908205cb98f173633e124b3933292a5 Mon Sep 17 00:00:00 2001 From: Nekzuris <48560751+Nekzuris@users.noreply.github.com> Date: Wed, 11 Dec 2024 21:27:45 +0100 Subject: [PATCH 2/6] Improve tiles rendering in Chrome with specific zoom value --- css/80_app.css | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/css/80_app.css b/css/80_app.css index 1f7bb14612..963a7a1dce 100644 --- a/css/80_app.css +++ b/css/80_app.css @@ -4367,9 +4367,11 @@ img.tile { opacity: 1; transition: opacity 120ms linear; } -.layer-background img.tile { - /* Fix visible grid around tiles borders on Chrome */ - mix-blend-mode: plus-lighter; +/* Fix visible grid around tiles borders on Chrome */ +@media not ((1.09 < -webkit-device-pixel-ratio < 1.11) or (0.79 < -webkit-device-pixel-ratio < 0.81) or (0.66 < -webkit-device-pixel-ratio < 0.68)) { + .layer-background img.tile { + mix-blend-mode: plus-lighter; + } } img.tile-removing { opacity: 0; From 874c1f5d73658fdc49207ff4547565b1e87d2cfb Mon Sep 17 00:00:00 2001 From: Nekzuris <48560751+Nekzuris@users.noreply.github.com> Date: Fri, 13 Dec 2024 07:36:45 +0100 Subject: [PATCH 3/6] Improve CSS comments --- css/80_app.css | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/css/80_app.css b/css/80_app.css index 963a7a1dce..5113a8fb27 100644 --- a/css/80_app.css +++ b/css/80_app.css @@ -4367,12 +4367,16 @@ img.tile { opacity: 1; transition: opacity 120ms linear; } -/* Fix visible grid around tiles borders on Chrome */ + +/* Workaround to remove visible grid around tile borders on Chrome */ +/* with 3 exceptions for 110%, 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.79 < -webkit-device-pixel-ratio < 0.81) or (0.66 < -webkit-device-pixel-ratio < 0.68)) { .layer-background img.tile { mix-blend-mode: plus-lighter; } } + img.tile-removing { opacity: 0; z-index: 1; From dcfcf222e2683df4ee5c526a74aaaeac00862238 Mon Sep 17 00:00:00 2001 From: Nekzuris <48560751+Nekzuris@users.noreply.github.com> Date: Fri, 13 Dec 2024 19:47:40 +0100 Subject: [PATCH 4/6] Dynamic epsilon for specific pixel ratios on Chrome --- css/80_app.css | 4 ++-- modules/renderer/tile_layer.js | 25 ++++++++++++++++++++++++- 2 files changed, 26 insertions(+), 3 deletions(-) diff --git a/css/80_app.css b/css/80_app.css index 5113a8fb27..5671caa897 100644 --- a/css/80_app.css +++ b/css/80_app.css @@ -4369,9 +4369,9 @@ img.tile { } /* Workaround to remove visible grid around tile borders on Chrome */ -/* with 3 exceptions for 110%, 80% and 67% browser zoom */ +/* 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.79 < -webkit-device-pixel-ratio < 0.81) or (0.66 < -webkit-device-pixel-ratio < 0.68)) { +@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)) { .layer-background img.tile { mix-blend-mode: plus-lighter; } diff --git a/modules/renderer/tile_layer.js b/modules/renderer/tile_layer.js index 5f98c0ea1c..727fcea6ef 100644 --- a/modules/renderer/tile_layer.js +++ b/modules/renderer/tile_layer.js @@ -15,10 +15,33 @@ 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, https://github.com/openstreetmap/iD/pull/10594 + 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; + } + } function tileSizeAtZoom(d, z) { - return ((d.tileSize * Math.pow(2, z - d[2])) / d.tileSize); + return ((d.tileSize * Math.pow(2, z - d[2])) / d.tileSize) + _epsilon; } 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 5/6] 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 5671caa897..854b68c12c 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 727fcea6ef..34d2d08fbc 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; } } From 4dc8f981bd9e15b4ec4a50cb461dc41c4a9dbefb Mon Sep 17 00:00:00 2001 From: Martin Raifer Date: Wed, 18 Dec 2024 15:21:50 +0100 Subject: [PATCH 6/6] Link to PR in inline comments --- css/80_app.css | 7 ++++--- modules/renderer/tile_layer.js | 1 + 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/css/80_app.css b/css/80_app.css index 854b68c12c..28a9da4b89 100644 --- a/css/80_app.css +++ b/css/80_app.css @@ -4368,9 +4368,10 @@ img.tile { transition: opacity 120ms linear; } -/* 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 */ +/* 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) diff --git a/modules/renderer/tile_layer.js b/modules/renderer/tile_layer.js index 34d2d08fbc..5feac6b562 100644 --- a/modules/renderer/tile_layer.js +++ b/modules/renderer/tile_layer.js @@ -19,6 +19,7 @@ export function rendererTileLayer(context) { // 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);