diff --git a/web/src/layer/LiveTileLayer.ts b/web/src/layer/LiveTileLayer.ts
index b64ed62..d8c97c2 100644
--- a/web/src/layer/LiveTileLayer.ts
+++ b/web/src/layer/LiveTileLayer.ts
@@ -62,8 +62,9 @@ export class LiveTileLayer extends L.TileLayer {
         tile.setAttribute('loaded', 'true');
     }
 
-    _tileOnError(done: L.DoneCallback, tile: HTMLElement, e: Error): void {
+    _tileOnError(done: L.DoneCallback, tile: HTMLImageElement, e: Error): void {
         super._tileOnError(done, tile, e);
+        tile.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
         tile.setAttribute('loaded', 'false');
     }
 
@@ -73,7 +74,6 @@ export class LiveTileLayer extends L.TileLayer {
     // callback is called when the tile has been loaded.
     createTile(coords: L.Coords, done: L.DoneCallback): HTMLImageElement {
         const tile: HTMLImageElement = L.DomUtil.create('img');
-        tile.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
         tile.setAttribute('loaded', 'false');
 
         L.DomEvent.on(tile, 'load', L.Util.bind(this._tileOnLoad, this, done, tile));
diff --git a/web/src/scss/livemap.scss b/web/src/scss/livemap.scss
index dd5e54c..8388d64 100644
--- a/web/src/scss/livemap.scss
+++ b/web/src/scss/livemap.scss
@@ -15,7 +15,6 @@ img.leaflet-tile {
   image-rendering: -moz-crisp-edges;
   border: 0 !important;
   opacity: 1;
-  transition: opacity .5s;
 
   /* See: https://github.com/GoogleChrome/lighthouse/issues/15497#issuecomment-2047385179 */
   mix-blend-mode: color-dodge !important;