fix: Fix popover/dialog backgrounds not blurred on older Webkit browsers (#35220)

app/javascript/styles/mastodon/_variables.scss

@@ -86,6 +86,11 @@ $inverted-text-color: $ui-base-color !default;
 $lighter-text-color: $ui-base-lighter-color !default;
 $light-text-color: $ui-primary-color !default;
 
+// Keep this filter a SCSS variable rather than
+// a CSS Custom Property due to this Safari bug:
+// https://github.com/mdn/browser-compat-data/issues/25914#issuecomment-2676190245
+$backdrop-blur-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%);
+
 // Language codes that uses CJK fonts
 $cjk-langs: ja, ko, zh-CN, zh-HK, zh-TW;
 

app/javascript/styles/mastodon/components.scss

@@ -362,7 +362,7 @@
   &.overlayed {
     box-sizing: content-box;
     background: rgba($black, 0.65);
-    backdrop-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%);
+    backdrop-filter: $backdrop-blur-filter;
     color: rgba($white, 0.7);
     border-radius: 4px;
     padding: 2px;
@@ -2016,7 +2016,7 @@ body > [data-popper-placement] {
 
     &__popout {
       background: var(--dropdown-background-color);
-      backdrop-filter: var(--background-filter);
+      backdrop-filter: $backdrop-blur-filter;
       border: 1px solid var(--dropdown-border-color);
       box-shadow: var(--dropdown-shadow);
       max-width: 320px;
@@ -2693,7 +2693,7 @@ a.account__display-name {
 
 .dropdown-menu {
   background: var(--dropdown-background-color);
-  backdrop-filter: var(--background-filter);
+  backdrop-filter: $backdrop-blur-filter;
   border: 1px solid var(--dropdown-border-color);
   padding: 4px;
   border-radius: 4px;
@@ -2892,7 +2892,7 @@ a.account__display-name {
   gap: 8px;
   padding-bottom: env(safe-area-inset-bottom);
   background: var(--background-color);
-  backdrop-filter: var(--background-filter);
+  backdrop-filter: $backdrop-blur-filter;
   border-top: 1px solid var(--background-border-color);
   box-sizing: border-box;
 
@@ -2952,7 +2952,7 @@ a.account__display-name {
 
 .tabs-bar__wrapper {
   background: var(--background-color);
-  backdrop-filter: var(--background-filter);
+  backdrop-filter: $backdrop-blur-filter;
   position: sticky;
   top: 0;
   z-index: 2;
@@ -4033,7 +4033,7 @@ a.account__display-name {
       background: rgba($base-shadow-color, 0.6);
       border-radius: 8px;
       padding: 12px 9px;
-      backdrop-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%);
+      backdrop-filter: $backdrop-blur-filter;
       flex: 0 0 auto;
       display: flex;
       justify-content: center;
@@ -4817,7 +4817,7 @@ a.status-card {
 
     &__label {
       background-color: rgba($black, 0.45);
-      backdrop-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%);
+      backdrop-filter: $backdrop-blur-filter;
       border-radius: 8px;
       padding: 12px 16px;
       display: flex;
@@ -5168,7 +5168,7 @@ a.status-card {
   margin-top: 5px;
   z-index: 2;
   background: var(--dropdown-background-color);
-  backdrop-filter: var(--background-filter);
+  backdrop-filter: $backdrop-blur-filter;
   border: 1px solid var(--dropdown-border-color);
   box-shadow: var(--dropdown-shadow);
   border-radius: 5px;
@@ -5366,7 +5366,7 @@ a.status-card {
 .language-dropdown__dropdown {
   box-shadow: var(--dropdown-shadow);
   background: var(--dropdown-background-color);
-  backdrop-filter: var(--background-filter);
+  backdrop-filter: $backdrop-blur-filter;
   border: 1px solid var(--dropdown-border-color);
   padding: 4px;
   border-radius: 4px;
@@ -6046,7 +6046,7 @@ a.status-card {
   min-height: 478px;
   flex-direction: column;
   background: var(--modal-background-color);
-  backdrop-filter: var(--background-filter);
+  backdrop-filter: $backdrop-blur-filter;
   border: 1px solid var(--modal-border-color);
   border-radius: 16px;
 
@@ -6090,7 +6090,7 @@ a.status-card {
     padding: 24px;
     flex-direction: column;
     background: var(--modal-background-color);
-    backdrop-filter: var(--background-filter);
+    backdrop-filter: $backdrop-blur-filter;
     border: 1px solid var(--modal-border-color);
   }
 
@@ -6308,7 +6308,7 @@ a.status-card {
   max-height: 80vh;
   flex-direction: column;
   background: var(--modal-background-color);
-  backdrop-filter: var(--background-filter);
+  backdrop-filter: $backdrop-blur-filter;
   border: 1px solid var(--modal-border-color);
   border-radius: 16px;
 
@@ -6375,7 +6375,7 @@ a.status-card {
 
   &__popout {
     background: var(--dropdown-background-color);
-    backdrop-filter: var(--background-filter);
+    backdrop-filter: $backdrop-blur-filter;
     border: 1px solid var(--dropdown-border-color);
     box-shadow: var(--dropdown-shadow);
     max-width: 320px;
@@ -6735,7 +6735,7 @@ a.status-card {
 .actions-modal {
   border-radius: 8px 8px 0 0;
   background: var(--dropdown-background-color);
-  backdrop-filter: var(--background-filter);
+  backdrop-filter: $backdrop-blur-filter;
   border-color: var(--dropdown-border-color);
   box-shadow: var(--dropdown-shadow);
   max-height: 80vh;
@@ -6861,7 +6861,7 @@ a.status-card {
     color: $white;
     border: 0;
     background: rgba($black, 0.65);
-    backdrop-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%);
+    backdrop-filter: $backdrop-blur-filter;
     padding: 3px 12px;
     border-radius: 99px;
     font-size: 14px;
@@ -6886,7 +6886,7 @@ a.status-card {
   color: $white;
   border: 0;
   background: rgba($black, 0.65);
-  backdrop-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%);
+  backdrop-filter: $backdrop-blur-filter;
   padding: 3px 8px;
   border-radius: 4px;
   font-size: 12px;
@@ -6908,7 +6908,7 @@ a.status-card {
 
 .media-gallery__alt__popover {
   background: rgba($black, 0.65);
-  backdrop-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%);
+  backdrop-filter: $backdrop-blur-filter;
   border-radius: 4px;
   box-shadow: var(--dropdown-shadow);
   padding: 16px;
@@ -7661,7 +7661,7 @@ a.status-card {
     inset-inline-start: 50%;
     transform: translate(-50%, -50%);
     background: rgba($base-shadow-color, 0.45);
-    backdrop-filter: var(--background-filter);
+    backdrop-filter: $backdrop-blur-filter;
     color: $white;
     border-radius: 8px;
     padding: 16px 24px;
@@ -8834,7 +8834,7 @@ noscript {
   &__footer {
     border-radius: 0 0 4px 4px;
     background: var(--modal-background-variant-color);
-    backdrop-filter: var(--background-filter);
+    backdrop-filter: $backdrop-blur-filter;
     border: 1px solid var(--modal-border-color);
     border-top: 0;
     padding: 12px;
@@ -8845,7 +8845,7 @@ noscript {
   &__header {
     border-radius: 4px 4px 0 0;
     background: var(--modal-background-variant-color);
-    backdrop-filter: var(--background-filter);
+    backdrop-filter: $backdrop-blur-filter;
     border: 1px solid var(--modal-border-color);
     border-bottom: 0;
     padding: 12px;
@@ -9251,7 +9251,7 @@ noscript {
   display: block;
   border-radius: 16px;
   background: var(--modal-background-color);
-  backdrop-filter: var(--background-filter);
+  backdrop-filter: $backdrop-blur-filter;
   border: 1px solid var(--modal-border-color);
   padding: 24px;
   box-sizing: border-box;
@@ -10885,7 +10885,7 @@ noscript {
 .hover-card {
   box-shadow: var(--dropdown-shadow);
   background: var(--modal-background-color);
-  backdrop-filter: var(--background-filter);
+  backdrop-filter: $backdrop-blur-filter;
   border: 1px solid var(--modal-border-color);
   border-radius: 8px;
   padding: 16px;

app/javascript/styles/mastodon/css_variables.scss

@@ -11,7 +11,6 @@
   --modal-background-variant-color: #{rgba($ui-base-color, 0.7)};
   --modal-border-color: #{lighten($ui-base-color, 4%)};
   --background-border-color: #{lighten($ui-base-color, 4%)};
-  --background-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%);
   --background-color: #{darken($ui-base-color, 8%)};
   --background-color-tint: #{rgba(darken($ui-base-color, 8%), 0.9)};
   --surface-background-color: #{darken($ui-base-color, 4%)};