From e8a603b18f80a44a68087e4f9a959de1ec773d3b Mon Sep 17 00:00:00 2001 From: diondiondion Date: Mon, 30 Jun 2025 14:16:54 +0200 Subject: [PATCH] fix: Fix popover/dialog backgrounds not blurred on older Webkit browsers (#35220) --- .../styles/mastodon/_variables.scss | 5 +++ .../styles/mastodon/components.scss | 44 +++++++++---------- .../styles/mastodon/css_variables.scss | 1 - 3 files changed, 27 insertions(+), 23 deletions(-) diff --git a/app/javascript/styles/mastodon/_variables.scss b/app/javascript/styles/mastodon/_variables.scss index e2a5afbe0..816a9d999 100644 --- a/app/javascript/styles/mastodon/_variables.scss +++ b/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; diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 6c126d89f..d783d717e 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/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; diff --git a/app/javascript/styles/mastodon/css_variables.scss b/app/javascript/styles/mastodon/css_variables.scss index 4390a917b..431cdd7a8 100644 --- a/app/javascript/styles/mastodon/css_variables.scss +++ b/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%)};