From e94b9d1d7fb96f743749531958147677945e1aad Mon Sep 17 00:00:00 2001
From: Calixte Denizet <calixte.denizet@gmail.com>
Date: Tue, 10 May 2022 17:51:07 +0200
Subject: [PATCH] Use a CSS transform to update the progress bar instead of
 changing the width (bug 1768481) - it isn't a fix for bug 1768481 but just a
 tiny improvement to refresh the progress bar on the compositor thread.

---
 examples/mobile-viewer/viewer.css | 14 ++++++++------
 web/viewer.css                    | 12 +++++++-----
 2 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/examples/mobile-viewer/viewer.css b/examples/mobile-viewer/viewer.css
index c46c87a3f..1e21c642a 100644
--- a/examples/mobile-viewer/viewer.css
+++ b/examples/mobile-viewer/viewer.css
@@ -200,27 +200,29 @@ canvas {
 #loadingBar .progress {
   position: absolute;
   left: 0;
-  width: var(--progressBar-percent);
+  width: 100%;
+  transform: scaleX(var(--progressBar-percent));
+  transform-origin: 0 0;
   height: 100%;
   background-color: rgba(221, 221, 221, 1);
   overflow: hidden;
-  transition: width 200ms;
+  transition: transform 200ms;
 }
 
 @keyframes progressIndeterminate {
   0% {
-    left: 0;
+    transform: translateX(0%);
   }
   50% {
-    left: 100%;
+    transform: translateX(100%);
   }
   100% {
-    left: 100%;
+    transform: translateX(100%);
   }
 }
 
 #loadingBar .progress.indeterminate {
-  width: 100%;
+  transform: none;
   background-color: rgba(153, 153, 153, 1);
   transition: none;
 }
diff --git a/web/viewer.css b/web/viewer.css
index 612886994..a8bad89cb 100644
--- a/web/viewer.css
+++ b/web/viewer.css
@@ -362,24 +362,26 @@ select {
   position: absolute;
   top: 0;
   left: 0;
-  width: var(--progressBar-percent);
+  width: 100%;
+  transform: scaleX(var(--progressBar-percent));
+  transform-origin: 0 0;
   height: 100%;
   background-color: var(--progressBar-color);
   overflow: hidden;
-  transition: width 200ms;
+  transition: transform 200ms;
 }
 
 @keyframes progressIndeterminate {
   0% {
-    left: -142px;
+    transform: translateX(-142px);
   }
   100% {
-    left: 0;
+    transform: translateX(0);
   }
 }
 
 #loadingBar .progress.indeterminate {
-  width: 100%;
+  transform: none;
   background-color: var(--progressBar-indeterminate-bg-color);
   transition: none;
 }