fix brief flickering during tile switching when zooming, fixes #10660

This commit is contained in:
Martin Raifer
2025-01-08 12:17:13 +01:00
parent b2b397c7ce
commit 460a9efce1
2 changed files with 6 additions and 5 deletions

View File

@@ -4365,7 +4365,7 @@ img.tile {
-webkit-user-drag: none;
opacity: 1;
transition: opacity 120ms linear;
transition: opacity 250ms linear;
/* prevent brief flickering of "broken image" on tile loading errors, see https://zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/ */
text-indent: 100%;
@@ -4374,22 +4374,23 @@ img.tile {
}
/* Workaround to remove visible grid around tile borders on Chrome
Only works with browser zoom multiple of 25 (75%, 100%, 125%...)
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 = 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 {
.layer-background img.tile-removing {
opacity: 0;
z-index: 1;
mix-blend-mode: normal;
}
.tile-label-debug {

View File

@@ -213,7 +213,7 @@ export function rendererTileLayer(context) {
if (tile.classed('tile-removing')) {
tile.remove();
}
}, 120);
}, 250);
});
image.enter()