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;
}