Fix story ghost animation for PWA on IOS (#3951)

src/components/story/StoryViewer.module.scss

@@ -11,10 +11,6 @@
   z-index: var(--z-story-viewer);
   transform-origin: 50% 50%;
 
-  @media (max-width: 600px) {
-    background: rgba(0, 0, 0, 1);
-  }
-
   // Potential perf improvement
   &:not(:global(.shown)) {
     display: block !important;
@@ -51,6 +47,10 @@
 .backdrop {
   background-color: rgba(0, 0, 0, 0.9);
   z-index: 0;
+
+  @media (max-width: 600px) {
+    background: rgba(0, 0, 0, 1);
+  }
 }
 
 .backdropNonInteractive {

src/components/story/helpers/ghostAnimation.ts

@@ -38,6 +38,11 @@ export function animateOpening(
   if (isMobile) {
     toWidth = windowWidth - 2 * MOBILE_OFFSET;
     toHeight = windowHeight - OFFSET_BOTTOM - 2 * MOBILE_OFFSET;
+
+    const safeAreaBottom = getComputedStyle(document.documentElement).getPropertyValue('--safe-area-bottom');
+    if (safeAreaBottom) {
+      toHeight -= parseFloat(safeAreaBottom);
+    }
   }
 
   const toLeft = isMobile ? MOBILE_OFFSET : (windowWidth - toWidth) / 2;

src/styles/_variables.scss

@@ -298,6 +298,11 @@ $color-message-story-mention-to: #74bcff;
   --slide-transition: 300ms cubic-bezier(0.25, 1, 0.5, 1);
   --select-transition: 200ms ease-out;
 
+  --safe-area-top: env(safe-area-inset-top);
+  --safe-area-right: env(safe-area-inset-right);
+  --safe-area-bottom: env(safe-area-inset-bottom);
+  --safe-area-left: env(safe-area-inset-left);
+
   body.is-ios {
     --layer-transition: 650ms cubic-bezier(0.22, 1, 0.36, 1);
     --layer-transition-behind: 650ms cubic-bezier(0.33, 1, 0.68, 1);