Default: avoid use of opacity for overlay scrollbars

If using the opacity CSS property the renderer cannot optimize these
handles without the use of offscreens due to the use of both a border
and rgb render node.

Instead, we can apply the alpha to the color values and get the same
effect in a way that the GL renderer can optimize without the use of
offscreen textures for a sizeable reduction in runtime overhead.

1 files changed, 6 insertions, 4 deletions

diff --git a/gtk/theme/Default/_common.scss b/gtk/theme/Default/_common.scss
index 27e75a2d52..a779dc2e7a 100644
--- a/gtk/theme/Default/_common.scss
+++ b/gtk/theme/Default/_common.scss
@@ -2352,15 +2352,14 @@ scrollbar {
   &.overlay-indicator {
     &:not(.dragging):not(.hovering) {
       border-color: transparent;
-      opacity: 0.4;
       background-color: transparent;
 
       > range > trough > slider {
         margin: 0;
         min-width: 3px;
         min-height: 3px;
-        background-color: $fg_color;
-        border: 1px solid if($variant == 'light', white, black);
+        background-color: gtkalpha($fg_color, 0.4);
+        border: 1px solid gtkalpha(if($variant == 'light', white, black), 0.4);
       }
 
       &.horizontal {
@@ -2379,7 +2378,10 @@ scrollbar {
     }
 
     &.dragging,
-    &.hovering { opacity: 0.8; }
+    &.hovering {
+      background-color: gtkalpha($scrollbar_bg_color, 0.8);
+      border: 1px solid gtkalpha(if($variant == 'light', white, black), 0.8);
+    }
   }
 
   &.horizontal > range > trough > slider { min-width: $_slider_min_length; }