Apply plus-lighter only at specific zoom levels

This commit is contained in:
Louis Demange
2024-12-17 07:01:21 +01:00
parent dcfcf222e2
commit 28e7faa13b
2 changed files with 17 additions and 17 deletions

View File

@@ -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;
}

View File

@@ -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;
}
}