fix: remove left and right white space on ios devices with notch

icelam · Apr 2, 2024 · 019f107 · 019f107
1 parent 14646fb
commit 019f107
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 1 deletion.
diff --git a/src/assets/scss/_base.scss b/src/assets/scss/_base.scss
@@ -46,6 +46,41 @@ body {
   @media #{$mobile} {
     padding: 0 5%;
   }
+
+  // Fixing the notch issue on iOS when using "viewport-fit=cover"
+  --safe-area-inset-top: 0px;
+  --safe-area-inset-right: 0px;
+  --safe-area-inset-bottom: 0px;
+  --safe-area-inset-left: 0px;
+
+  // Older iOS versions
+  @supports (top: constant(safe-area-inset-top)) {
+    --safe-area-inset-top: constant(safe-area-inset-top);
+    --safe-area-inset-right: constant(safe-area-inset-right);
+    --safe-area-inset-bottom: constant(safe-area-inset-bottom);
+    --safe-area-inset-left: constant(safe-area-inset-left);
+  }
+
+  @supports (top: env(safe-area-inset-top)) {
+    --safe-area-inset-top: env(safe-area-inset-top);
+    --safe-area-inset-right: env(safe-area-inset-right);
+    --safe-area-inset-bottom: env(safe-area-inset-bottom);
+    --safe-area-inset-left: env(safe-area-inset-left);
+  }
+
+  @supports (padding: unquote('max(0px)')) {
+    padding: 0
+      unquote(
+        'max(3.125rem, var(--safe-area-inset-right)) 0 max(3.125rem, var(--safe-area-inset-left))'
+      );
+
+    @media #{$mobile} {
+      padding: 0
+        unquote(
+          'max(5%, var(--safe-area-inset-right)) 0 max(5%, var(--safe-area-inset-left))'
+        );
+    }
+  }
 }
 
 .main {

diff --git a/src/assets/scss/_slot.scss b/src/assets/scss/_slot.scss
@@ -34,6 +34,22 @@
   top: 1rem;
   right: 1rem;
 
+  // Fixing the notch issue on iOS when using "viewport-fit=cover"
+  --safe-area-inset-right: 0px;
+
+  // Older iOS versions
+  @supports (top: constant(safe-area-inset-top)) {
+    --safe-area-inset-right: constant(safe-area-inset-right);
+  }
+
+  @supports (top: env(safe-area-inset-top)) {
+    --safe-area-inset-right: env(safe-area-inset-right);
+  }
+
+  @supports (padding: unquote('max(0px)')) {
+    right: unquote('max(1rem, var(--safe-area-inset-right))');
+  }
+
   .icon-button {
     margin: 0 0 0 1.5rem;
   }

diff --git a/src/index.pug b/src/index.pug
@@ -5,7 +5,7 @@ html(xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en")
     meta(http-equiv="Content-Type" content="text/html; charset=utf-8")
     meta(name="language" content="English")
     meta(http-equiv="X-UA-Compatible" content="IE=edge")
-    meta(name="viewport" content="width=device-width, initial-scale=1, user-scalable=no")
+    meta(name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, viewport-fit=cover")
     meta(name="format-detection" content="telephone=no, date=no, address=no, email=no")
     meta(name="msapplication-tap-highlight" content="no")