diff --git a/gui/src/index.html b/gui/src/index.html
index 9981adf2..328be2ef 100644
--- a/gui/src/index.html
+++ b/gui/src/index.html
@@ -855,9 +855,9 @@
 						</div>
 						<div class="card-body p-1" style="height: 200px">
 							<!--278px-->
-							<canvas id="waterfall" style="position: relative; z-index: 2; transform: translateZ(0);"></canvas>
-							<canvas id="scatter" style="position: relative; z-index: 1; transform: translateZ(0);"></canvas>
-							<canvas id="chart" style="position: relative; z-index: 1; transform: translateZ(0);"></canvas>
+							<canvas id="waterfall" style="position: relative; z-index: 2;" class="force-gpu"></canvas>
+							<canvas id="scatter" style="position: relative; z-index: 1;" class="force-gpu"></canvas>
+							<canvas id="chart" style="position: relative; z-index: 1;" class="force-gpu"></canvas>
 						</div>
 					</div>
 				</div>
diff --git a/gui/src/styles.css b/gui/src/styles.css
index 276ab1d2..70f9376f 100644
--- a/gui/src/styles.css
+++ b/gui/src/styles.css
@@ -78,3 +78,14 @@ https://stackoverflow.com/questions/13176746/css-keyframe-animation-cpu-usage-is
     -ms-transform: translateZ(0);
     will-change: transform;
 }
+
+/* force disable transition effects
+https://stackoverflow.com/a/9622873
+*/
+.disable-effects {
+    -webkit-transition: none;
+    -moz-transition: none;
+    -ms-transition: none;
+    -o-transition: none;
+    transition: none;
+}