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

12
web/viewer.css
View File

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