Merge pull request #73 from FDMediagroep/develop

Safari notch fix viewport-fit=cover
FDMediagroep · Aug 18, 2020 · fbfc49f · fbfc49f · vercel · Aug 18, 2020
2 parents 6384ff8 + b3d4b36
commit fbfc49f
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 7 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@fdmg/design-system",
-    "version": "0.4.20",
+    "version": "0.4.21",
     "description": "FD Design System",
     "types": "main.d.ts",
     "main": "main.js",

diff --git a/src/components/modal/Modal.module.scss b/src/components/modal/Modal.module.scss
@@ -54,7 +54,7 @@
         right: 0;
         left: 0;
         bottom: 0;
-        @media screen and (min-width: map-deep-get($media, 'sizes', 'm')) {
+        @media screen and (min-width: map-deep-get($media, 'sizes', 'l')) {
             position: relative;
             max-width: 560px;
             max-height: 80vh;
@@ -97,10 +97,23 @@
     .content {
         flex: 1 1 auto;
         padding: 2rem;
-        @media screen and (min-width: map-deep-get($media, 'sizes', 'm')) {
+        @media screen and (min-width: map-deep-get($media, 'sizes', 'l')) {
             padding: 2rem 3rem 2rem 2rem;
         }
 
+        // Safari fixes
+        @supports (-webkit-touch-callout: none) {
+            /* CSS specific to iOS devices */
+            @media (orientation: landscape) and (max-width: map-deep-get($media, 'sizes', 'l')) {
+                max-height: calc(100vh - 44px); // Safari viewport fix
+                max-height: -webkit-fill-available; // Safari viewport fix
+                padding: calc(2rem + env(safe-area-inset-top))
+                    calc(2rem + env(safe-area-inset-right))
+                    calc(2rem + env(safe-area-inset-bottom))
+                    calc(2rem + env(safe-area-inset-left)); // Safari notch fix
+            }
+        }
+
         box-sizing: border-box;
         overflow-y: auto;
         overscroll-behavior: contain;
@@ -156,7 +169,7 @@
         justify-content: center;
         touch-action: none; // Safari overscroll bug fix
 
-        @media screen and (min-width: map-deep-get($media, 'sizes', 'm')) {
+        @media screen and (min-width: map-deep-get($media, 'sizes', 'l')) {
             display: none;
         }
 
@@ -189,7 +202,7 @@
             fill: #{map-deep-get($colors, 'colors', 'primary', 75)};
         }
 
-        @media screen and (min-width: map-deep-get($media, 'sizes', 'm')) {
+        @media screen and (min-width: map-deep-get($media, 'sizes', 'l')) {
             display: block;
         }
     }

diff --git a/src/pages/_app.scss b/src/pages/_app.scss
@@ -25,3 +25,10 @@ body {
     margin: 0;
     font-family: map-deep-get($typography, 'font-family', 'regular'), sans-serif;
 }
+
+@supports (-webkit-touch-callout: none) {
+    body {
+        padding: env(safe-area-inset-top) env(safe-area-inset-right)
+            env(safe-area-inset-bottom) env(safe-area-inset-left); // Safari notch fix
+    }
+}
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -47,7 +47,7 @@ function App({ Component, pageProps }) {
             <Head>
                 <meta
                     name="viewport"
-                    content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no, minimal-ui"
+                    content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no, minimal-ui, viewport-fit=cover"
                 />
             </Head>
             <section className={pageStyle}>