diff --git a/htdocs/css/openwebrx.css b/htdocs/css/openwebrx.css
index 2fa5933..9ed0a5d 100644
--- a/htdocs/css/openwebrx.css
+++ b/htdocs/css/openwebrx.css
@@ -302,6 +302,7 @@ input[type=range]:disabled {
 	image-rendering: -webkit-optimize-contrast;
     width: 100%;
     height: 200px;
+    will-change: transform;
 }
 
 #openwebrx-log-scroll
@@ -772,6 +773,7 @@ img.openwebrx-mirror-img
     position: absolute;
     pointer-events: none;
     transition: width 500ms, left 500ms;
+    will-change: transform;
 }
 
 .openwebrx-panel select,
diff --git a/htdocs/openwebrx.js b/htdocs/openwebrx.js
index 455c097..eaaf729 100644
--- a/htdocs/openwebrx.js
+++ b/htdocs/openwebrx.js
@@ -1074,7 +1074,7 @@ function add_canvas() {
     new_canvas.height = canvas_default_height;
     canvas_actual_line = canvas_default_height;
     new_canvas.openwebrx_top = -canvas_default_height;
-    new_canvas.style.top = new_canvas.openwebrx_top.toString() + "px";
+    new_canvas.style.transform = 'translate(0, ' + new_canvas.openwebrx_top.toString() + 'px)';
     canvas_context = new_canvas.getContext("2d");
     canvas_container.appendChild(new_canvas);
     canvases.push(new_canvas);
@@ -1101,7 +1101,7 @@ canvas_maxshift = 0;
 
 function shift_canvases() {
     canvases.forEach(function (p) {
-        p.style.top = (p.openwebrx_top++).toString() + "px";
+        p.style.transform = 'translate(0, ' + (p.openwebrx_top++).toString() + 'px)';
     });
     canvas_maxshift++;
 }
@@ -1407,7 +1407,9 @@ function secondary_demod_init_canvases() {
 }
 
 function secondary_demod_canvases_update_top() {
-    for (var i = 0; i < 2; i++) secondary_demod_canvases[i].style.top = secondary_demod_canvases[i].openwebrx_top + "px";
+    for (var i = 0; i < 2; i++) {
+        secondary_demod_canvases[i].style.transform = 'translate(0, ' + secondary_demod_canvases[i].openwebrx_top + 'px)';
+    }
 }
 
 function secondary_demod_swap_canvases() {