CalvinBackup/iD
1
0
Fork 0
mirror of https://github.com/FoggedLens/iD.git synced 2026-02-12 16:52:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

make background map tile edges opaque

Browse Source 
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
This commit is contained in:
Martin Raifer
2025-02-10 13:44:17 +01:00
parent 97600e3ce8
commit 9e110cfda4
4 changed files with 30 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
css/80_app.css
View File

@@ -4373,26 +4373,15 @@ 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,
.map-in-map-background img.tile {
mix-blend-mode: plus-lighter;
}
.layer-background img.tile,
.map-in-map-background img.tile {
filter: url(#alpha-slope5);
}
.layer-background img.tile-removing,
.map-in-map-background img.tile-removing {
opacity: 0;
z-index: 1;
mix-blend-mode: normal;
}
.tile-label-debug {