Sakurai/pdf.js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use a CSS transform to update the progress bar instead of changing the width (bug 1768481)

Browse Source 
- it isn't a fix for bug 1768481 but just a tiny improvement to refresh the progress bar on the compositor thread.
This commit is contained in:
Calixte Denizet 2022-05-10 17:51:07 +02:00
parent 63441e8f1e
commit e94b9d1d7f
2 changed files with 15 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
examples/mobile-viewer/viewer.css
View File

@ -200,27 +200,29 @@ canvas {
#loadingBar .progress { #loadingBar .progress {
position: absolute; position: absolute;
left: 0; left: 0;
width: var(--progressBar-percent); width: 100%;
transform: scaleX(var(--progressBar-percent));
transform-origin: 0 0;
height: 100%; height: 100%;
background-color: rgba(221, 221, 221, 1); background-color: rgba(221, 221, 221, 1);
overflow: hidden; overflow: hidden;
transition: width 200ms; transition: transform 200ms;
} }
@keyframes progressIndeterminate { @keyframes progressIndeterminate {
0% { 0% {
left: 0; transform: translateX(0%);
} }
50% { 50% {
left: 100%; transform: translateX(100%);
} }
100% { 100% {
left: 100%; transform: translateX(100%);
} }
} }
#loadingBar .progress.indeterminate { #loadingBar .progress.indeterminate {
width: 100%; transform: none;
background-color: rgba(153, 153, 153, 1); background-color: rgba(153, 153, 153, 1);
transition: none; transition: none;
} }

12
web/viewer.css
View File

@ -362,24 +362,26 @@ select {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: var(--progressBar-percent); width: 100%;
transform: scaleX(var(--progressBar-percent));
transform-origin: 0 0;
height: 100%; height: 100%;
background-color: var(--progressBar-color); background-color: var(--progressBar-color);
overflow: hidden; overflow: hidden;
transition: width 200ms; transition: transform 200ms;
} }
@keyframes progressIndeterminate { @keyframes progressIndeterminate {
0% { 0% {
left: -142px; transform: translateX(-142px);
} }
100% { 100% {
left: 0; transform: translateX(0);
} }
} }
#loadingBar .progress.indeterminate { #loadingBar .progress.indeterminate {
width: 100%; transform: none;
background-color: var(--progressBar-indeterminate-bg-color); background-color: var(--progressBar-indeterminate-bg-color);
transition: none; transition: none;
} }