From 3397dbc2e94b252e49d00e0e65458d3322181222 Mon Sep 17 00:00:00 2001 From: diondiondion Date: Mon, 21 Sep 2026 10:15:38 +0000 Subject: [PATCH] Redesign: Fix bottom sheet backdrop under iOS address bar (#40622) --- .../components/bottom_sheet/styles.module.scss | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/app/javascript/mastodon/components/bottom_sheet/styles.module.scss b/app/javascript/mastodon/components/bottom_sheet/styles.module.scss index 9db793c0baf..e02423f10d3 100644 --- a/app/javascript/mastodon/components/bottom_sheet/styles.module.scss +++ b/app/javascript/mastodon/components/bottom_sheet/styles.module.scss @@ -12,8 +12,19 @@ overscroll-behavior: contain; &::backdrop { - opacity: 0.9; - background-color: var(--color-bg-overlay); + --bg: #{rgb(from var(--color-bg-overlay) r g b / 90%)}; + + background: var(--bg); + + // Paint a bit (or nothing) of the the bottom sheet's primary + // background color at the bottom of the ::backdrop to get + // Safari on iOS to paint the background behind its address bar + // in the same primary bg color rather than the dark overlay color. + background: linear-gradient( + to top, + var(--color-bg-primary) env(safe-area-inset-bottom), + var(--bg) env(safe-area-inset-bottom) + ); } &::after {