diff --git a/res/themes/element/css/_mods.scss b/res/themes/element/css/_mods.scss
index 091f382537..e8d126d22f 100644
--- a/res/themes/element/css/_mods.scss
+++ b/res/themes/element/css/_mods.scss
@@ -4,7 +4,7 @@
 // set the user avatar (if any) as a background so
 // it can be blurred by the tag panel and room list
 
-@supports (backdrop-filter: blur(100px)) {
+@supports (backdrop-filter: none) {
     .mx_LeftPanel2 {
         background-image: var(--avatar-url);
         background-repeat: no-repeat;
@@ -20,18 +20,18 @@
         backdrop-filter: blur(175px);
     }
 
-    // sticky headers need their own blur
-
+    // sticky headers need their own blur, and their own background to make it opaque
     .mx_RoomSublist2_headerContainer_sticky {
         background-size: cover;
         background-image: var(--avatar-url);
         background-position: center;
     }
+}
 
-    .mx_RoomSublist2_headerContainer_sticky .mx_RoomSublist2_stickyHeaderBlur {
-        backdrop-filter: blur(100px);
-        background-color: $roomlist2-bg-color;
-    }
+/* outside of @supports as the backdrop-filter will be ignored, and we still apply the mostly-opaque background color */
+.mx_RoomSublist2_headerContainer_sticky .mx_RoomSublist2_stickyHeaderBlur {
+    backdrop-filter: blur(100px);
+    background-color: $roomlist2-bg-color;
 }
 
 .mx_RoomSublist2_showNButton {