joachim/openwebrx-clone
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

use transform for better performance

Browse Source
This commit is contained in:
Jakob Ketterl 2021-01-02 17:53:54 +01:00
parent 44f4532452
commit 9d89cbceed
2 changed files with 4 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
htdocs/css/openwebrx.css
View File

@ -559,13 +559,11 @@ img.openwebrx-mirror-img
border-radius: 5px; border-radius: 5px;
height: 100%; height: 100%;
width: 100%; width: 100%;
position: absolute; transition-property: transform, background-color;
left: -100%;
transition-property: left,background-color;
transition-duration: 1s; transition-duration: 1s;
transition-timing-function: ease-in-out; transition-timing-function: ease-in-out;
transform: translateZ(0); transform: translate(-100%) translateZ(0);
will-change: left; will-change: transform, background-color;
} }
.openwebrx-progressbar--over .openwebrx-progressbar-bar { .openwebrx-progressbar--over .openwebrx-progressbar-bar {

2
htdocs/lib/ProgressBar.js
View File

@ -18,7 +18,7 @@ ProgressBar.prototype.set = function(val, text, over) {
ProgressBar.prototype.setValue = function(val) { ProgressBar.prototype.setValue = function(val) {
if (val < 0) val = 0; if (val < 0) val = 0;
if (val > 1) val = 1; if (val > 1) val = 1;
this.$innerBar.css({left: (val - 1) * 100 + '%'}); this.$innerBar.css({transform: 'translate(' + ((val - 1) * 100) + '%) translateZ(0)'});
}; };
ProgressBar.prototype.setText = function(text) { ProgressBar.prototype.setText = function(text) {