Merge pull request #4276 from matrix-org/bwindels/transparentscrollbars

Fix: allow scrolling while window is not focused & remove scrollbar hack

res/css/structures/_AutoHideScrollbar.scss

@@ -14,76 +14,34 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-/* This file has CSS for both native and non-native scrollbars in an order
- * that's fairly logical to read but duplicates a selector to separate the
- * hiding/showing from the sizing.
- */
-/* stylelint-disable no-duplicate-selectors */
-
-/*
-1. for browsers that support native overlay auto-hiding scrollbars
-*/
 .mx_AutoHideScrollbar {
     overflow-x: hidden;
     overflow-y: auto;
+    overflow-y: overlay;    // where supported
     -ms-overflow-style: -ms-autohiding-scrollbar;
-}
-/*
-2. webkit also supports overflow:overlay where the scrollbars don't take any space
-in the layout but they don't autohide, so do that only on hover
-*/
-body.mx_scrollbar_overlay_noautohide .mx_AutoHideScrollbar {
-    overflow-y: hidden;
-}
 
-body.mx_scrollbar_overlay_noautohide .mx_AutoHideScrollbar:hover {
-    overflow-y: overlay;
-}
-/*
-3. as a last fallback, compensate for the scrollbar taking up space in the layout
-by having giving the child element (.mx_AutoHideScrollbar_offset) a
-negative right margin of the width of the scrollbar when the container
-is overflowing. This is what Firefox ends up using. Overflow is detected
-in javascript, and adds the mx_AutoHideScrollbar_overflow class to the container.
-This only works in Firefox, which should be fine as this fallback is only needed there.
-*/
-body.mx_scrollbar_nooverlay {
-    .mx_AutoHideScrollbar {
-        overflow-y: hidden;
+    &::-webkit-scrollbar {
+        width: 6px;
+        height: 6px;
+        background-color: transparent;
     }
 
-    .mx_AutoHideScrollbar:hover {
-        overflow-y: auto;
+    &::-webkit-scrollbar-thumb {
+        border-radius: 3px;
+        background-color: transparent;
     }
 
-    /*
-    offset scrollbar width with negative margin-right
-
-    include before and after psuedo-elements here so they can
-    be used to do something interesting like scroll-indicating
-    gradients (see IndicatorScrollBar)
-    */
-    .mx_AutoHideScrollbar:hover.mx_AutoHideScrollbar_overflow > .mx_AutoHideScrollbar_offset,
-    .mx_AutoHideScrollbar:hover.mx_AutoHideScrollbar_overflow::before,
-    .mx_AutoHideScrollbar:hover.mx_AutoHideScrollbar_overflow::after {
-        margin-right: calc(-1 * var(--scrollbar-width));
-    }
-}
-
-// style the native scrollbars ...
-// ... standard css scrollbars (firefox at time of writing)
-.mx_AutoHideScrollbar {
-    scrollbar-color: $scrollbar-thumb-color $scrollbar-track-color;
+    scrollbar-color: transparent transparent;
     scrollbar-width: thin;
 }
-// or fallback for webkit browsers
-::-webkit-scrollbar {
-    width: 6px;
-    height: 6px;
-    background-color: $scrollbar-track-color;
-}
 
-::-webkit-scrollbar-thumb {
-    background-color: $scrollbar-thumb-color;
-    border-radius: 3px;
+.mx_AutoHideScrollbar:hover {
+    &::-webkit-scrollbar {
+        background-color: $scrollbar-track-color;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background-color: $scrollbar-thumb-color;
+    }
+    scrollbar-color: $scrollbar-thumb-color $scrollbar-track-color;
 }

res/css/structures/_GroupView.scss

@@ -337,7 +337,7 @@ limitations under the License.
     display: none;
 }
 
-.mx_GroupView_body .mx_AutoHideScrollbar_offset > * {
+.mx_GroupView_body .mx_AutoHideScrollbar > * {
     margin: 11px 50px 50px 68px;
 }
 
@@ -366,7 +366,7 @@ limitations under the License.
     padding: 40px 20px;
 }
 
-.mx_GroupView .mx_MemberInfo .mx_AutoHideScrollbar_offset > :not(.mx_MemberInfo_avatar) {
+.mx_GroupView .mx_MemberInfo .mx_AutoHideScrollbar > :not(.mx_MemberInfo_avatar) {
     padding-left: 16px;
     padding-right: 16px;
 }

res/css/structures/_RoomSubList.scss

@@ -166,41 +166,22 @@ limitations under the License.
 
 // overflow indicators
 .mx_RoomSubList:not(.resized-all) > .mx_RoomSubList_scroll {
-    &.mx_IndicatorScrollbar_topOverflow::before,
-    &.mx_IndicatorScrollbar_bottomOverflow::after {
+    &.mx_IndicatorScrollbar_topOverflow::before {
         position: sticky;
+        content: "";
+        top: 0;
         left: 0;
         right: 0;
         height: 8px;
-        content: "";
-        display: block;
         z-index: 100;
+        display: block;
         pointer-events: none;
-    }
-
-    &.mx_IndicatorScrollbar_topOverflow > .mx_AutoHideScrollbar_offset {
-        margin-top: -8px;
-    }
-    &.mx_IndicatorScrollbar_bottomOverflow > .mx_AutoHideScrollbar_offset {
-        margin-bottom: -8px;
-    }
-
-    &.mx_IndicatorScrollbar_topOverflow::before {
-        top: 0;
         transition: background-image 0.1s ease-in;
         background: linear-gradient(to top, $panel-gradient);
     }
 
-    /*
-    // for now, we remove the bottomOverflow entirely as we don't want to
-    // lose the screen real-estate due to a bg-colored gradient, but we also
-    // don't want to use drop shadows and risk a confusing hierarchy of cards.
-    // so, instead, we hard-clip at the bottom but soft-clip at the top.
-    &.mx_IndicatorScrollbar_bottomOverflow::after {
-        bottom: 0;
-        transition: background-image 0.1s ease-in;
-        margin: 0px -8px;
-        background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.0));
+
+    &.mx_IndicatorScrollbar_topOverflow {
+        margin-top: -8px;
     }
-    */
 }

res/css/views/rooms/_RoomBreadcrumbs.scss

@@ -41,7 +41,7 @@ limitations under the License.
         overflow-x: visible;
     }
 
-    .mx_AutoHideScrollbar_offset {
+    .mx_AutoHideScrollbar {
         display: flex;
         flex-direction: row;
         height: 100%;