diff --git a/css/80_app.css b/css/80_app.css index afc58418f..555a96d98 100644 --- a/css/80_app.css +++ b/css/80_app.css @@ -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 { diff --git a/modules/renderer/tile_layer.js b/modules/renderer/tile_layer.js index 5feac6b56..26fa1e684 100644 --- a/modules/renderer/tile_layer.js +++ b/modules/renderer/tile_layer.js @@ -213,7 +213,7 @@ export function rendererTileLayer(context) { if (tile.classed('tile-removing')) { tile.remove(); } - }, 120); + }, 250); }); image.enter()