From 0e33be020d651b482d7f767ba1eeb37e1bbcc205 Mon Sep 17 00:00:00 2001
From: thislight <l1589002388@gmail.com>
Date: Sun, 10 Nov 2024 23:21:08 +0800
Subject: [PATCH] App: try to fix the bottom gap on iOS standalone

---
 src/App.css | 23 +++++++++++++++++------
 1 file changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/App.css b/src/App.css
index abcc2e9..c891e53 100644
--- a/src/App.css
+++ b/src/App.css
@@ -7,14 +7,25 @@
   --safe-area-inset-bottom: env(safe-area-inset-bottom);
   --safe-area-inset-right: env(safe-area-inset-right);
   background-color: var(--tutu-color-surface, transparent);
-  overscroll-behavior-y: none; /* FIXME: Safari 15.4 does not support this, requires 16+ */
 }
 
-:root, body, #root {
-  min-height: 100vh;
-  min-height: 100dvh;
-  height: 100vh;
-  height: 100dvh;
+/*
+Fix the bottom gap on iOS standalone.
+https://stackoverflow.com/questions/66005655/pwa-ios-child-of-body-not-taking-100-height-gap-on-bottom
+*/
+@media screen and (display-mode: standalone) {
+  body {
+    width: 100%;
+    height: 100vh;
+  }
+
+  #root {
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100vh;
+    width: 100vw;
+  }
 }
 
 .custom-emoji {