From 460a9efce18a5cff2b7f03761a29e35e49500cf0 Mon Sep 17 00:00:00 2001
From: Martin Raifer <martin@raifer.tech>
Date: Wed, 8 Jan 2025 12:17:13 +0100
Subject: [PATCH] fix brief flickering during tile switching when zooming,
 fixes #10660

---
 css/80_app.css                 | 9 +++++----
 modules/renderer/tile_layer.js | 2 +-
 2 files changed, 6 insertions(+), 5 deletions(-)

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()