Dynamic epsilon for specific pixel ratios on Chrome

This commit is contained in:
Nekzuris
2024-12-13 19:47:40 +01:00
committed by GitHub
parent 874c1f5d73
commit dcfcf222e2
2 changed files with 26 additions and 3 deletions

View File

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

View File

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