diff --git a/htdocs/css/openwebrx.css b/htdocs/css/openwebrx.css
index 05cfcbf..c2e87fc 100644
--- a/htdocs/css/openwebrx.css
+++ b/htdocs/css/openwebrx.css
@@ -559,13 +559,11 @@ img.openwebrx-mirror-img
border-radius: 5px;
height: 100%;
width: 100%;
- position: absolute;
- left: -100%;
- transition-property: left,background-color;
+ transition-property: transform, background-color;
transition-duration: 1s;
transition-timing-function: ease-in-out;
- transform: translateZ(0);
- will-change: left;
+ transform: translate(-100%) translateZ(0);
+ will-change: transform, background-color;
}
.openwebrx-progressbar--over .openwebrx-progressbar-bar {
@@ -678,8 +676,7 @@ img.openwebrx-mirror-img
}
}
-#openwebrx-smeter-outer
-{
+#openwebrx-smeter {
border-color: #888;
border-style: solid;
border-width: 0px;
@@ -687,16 +684,20 @@ img.openwebrx-mirror-img
height: 7px;
background-color: #373737;
border-radius: 3px;
- position: relative;
+ overflow: hidden;
}
-#openwebrx-smeter-bar
-{
- transition: all 0.2s linear;
- width: 0px;
- height: 7px;
+
+.openwebrx-smeter-bar {
+ transition-property: transform;
+ transition-duration: 0.2s;
+ transition-timing-function: linear;
+ will-change: transform;
+ transform: translate(-100%) translateZ(0);
+ width: 100%;
+ height: 100%;
background: linear-gradient(to top, #ff5939 , #961700);
- position: absolute;
- margin: 0; padding: 0; left: 0;
+ margin: 0;
+ padding: 0;
border-radius: 3px;
}
diff --git a/htdocs/index.html b/htdocs/index.html
index 21dd986..3932923 100644
--- a/htdocs/index.html
+++ b/htdocs/index.html
@@ -151,8 +151,8 @@
0 dB
diff --git a/htdocs/lib/ProgressBar.js b/htdocs/lib/ProgressBar.js
index 71b1754..9b791ad 100644
--- a/htdocs/lib/ProgressBar.js
+++ b/htdocs/lib/ProgressBar.js
@@ -18,7 +18,7 @@ ProgressBar.prototype.set = function(val, text, over) {
ProgressBar.prototype.setValue = function(val) {
if (val < 0) val = 0;
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) {
diff --git a/htdocs/openwebrx.js b/htdocs/openwebrx.js
index 594f0b5..05bce97 100644
--- a/htdocs/openwebrx.js
+++ b/htdocs/openwebrx.js
@@ -151,13 +151,19 @@ function waterfallColorsContinuous(levels) {
function setSmeterRelativeValue(value) {
if (value < 0) value = 0;
if (value > 1.0) value = 1.0;
- var bar = e("openwebrx-smeter-bar");
- var outer = e("openwebrx-smeter-outer");
- bar.style.width = (outer.offsetWidth * value).toString() + "px";
- var bgRed = "linear-gradient(to top, #ff5939 , #961700)";
- var bgGreen = "linear-gradient(to top, #22ff2f , #008908)";
- var bgYellow = "linear-gradient(to top, #fff720 , #a49f00)";
- bar.style.background = (value > 0.9) ? bgRed : ((value > 0.7) ? bgYellow : bgGreen);
+ var $meter = $("#openwebrx-smeter");
+ var $bar = $meter.find(".openwebrx-smeter-bar");
+ $bar.css({transform: 'translate(' + ((value - 1) * 100) + '%) translateZ(0)'});
+ if (value > 0.9) {
+ // red
+ $bar.css({background: 'linear-gradient(to top, #ff5939 , #961700)'});
+ } else if (value > 0.7) {
+ // yellow
+ $bar.css({background: 'linear-gradient(to top, #fff720 , #a49f00)'});
+ } else {
+ // red
+ $bar.css({background: 'linear-gradient(to top, #22ff2f , #008908)'});
+ }
}
function setSquelchSliderBackground(val) {