Force redraw on zoom to fix HW Accel blur

index.html

@@ -230,7 +230,7 @@
     <div id="topleft">
         <div id="headerbar" class="panel orange">
             <div>
-                DV Community Map
+                <span id="redrawTrigger"></span>DV Community Map
             </div>
         </div>
         <div id="legend">

index.js

@@ -56,6 +56,7 @@ const zoomLevelDisplay = document.getElementById('zoomLevelDisplay');
 const zoomStyle = document.getElementById('zoomStyle');
 const styleRoot = document.querySelector(':root');
 const svgns = map.getAttribute('xmlns');
+const redrawTriggerElement = document.getElementById('redrawTrigger');
 
 const map_rails = document.createElementNS(svgns, 'g');
 map_rails.setAttribute('id', 'map_rails');
@@ -256,9 +257,14 @@ function updateMapview(){
             zoomStyle.innerHTML = dynamicStyles.join('\n');
         }
         previousMapScale = mapNav.scale;
+        forceRedraw();
     }
 }
 
+function forceRedraw(){
+    redrawTriggerElement.style.backgroundColor = Color.random().hex;
+}
+
 /** Get the bounding box of all the tracks, and set the map bounds accordingly. Also flips the Y axis.
  * **Note:** Does NOT evaluate beziers, uses the control points only.
 */

style.css

@@ -99,6 +99,15 @@ a:visited{
     pointer-events: all;
 }
 
+#redrawTrigger{
+    transition: background-color 800ms;
+    display: inline-block;
+    width: 1px;
+    height: 5px;
+    background-color: #000;
+    opacity: 0.01;
+}
+
 #settingsPanel{
     user-select: none;
     input, label{