Accommodate camera notches on new devices (iPhone X, Google Pixel 3 etc)

alphagov · Feb 14, 2019 · 1263c18 · 1263c18
1 parent 550cf5f
commit 1263c18
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -20,6 +20,15 @@
 
   ([PR #N](https://github.com/alphagov/govuk-frontend/pull/N))
 
+- Accommodate camera notches on new devices (iPhone X, Google Pixel 3 etc)
+
+  On newer devices with "camera notches", browsers reserve a safe area in landscape orientation (known as pillarboxing) so content isn't obscured.
+
+  To avoid this, support has been added for `viewport-fit=cover` as shown here:
+  https://webkit.org/blog/7929/designing-websites-for-iphone-x/
+
+  ([PR #1176](https://github.com/alphagov/govuk-frontend/pull/1176))
+
 🔧 Fixes:
 
 - Pull Request Title goes here

diff --git a/docs/installation/examples/webpack/index.html b/docs/installation/examples/webpack/index.html
@@ -4,7 +4,7 @@
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <title>GOV.UK Frontend</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
   <!--[if !IE 8]><!-->
     <link rel="stylesheet" href="../../public/css/app.css">
   <!--<![endif]-->

diff --git a/src/components/skip-link/_skip-link.scss b/src/components/skip-link/_skip-link.scss
@@ -11,5 +11,13 @@
 
     display: block;
     padding: govuk-spacing(2) govuk-spacing(3);
+
+    // Add safe area (e.g. iPhone X, Google Pixel 3)
+    @supports (padding: unquote("max(0px)")) {
+      // Use safe area or default padding, whichever is larger
+      // Escaped due to Sass max() vs. CSS native max()
+      padding-right: unquote("max(#{govuk-spacing(3)}, env(safe-area-inset-right))");
+      padding-left: unquote("max(#{govuk-spacing(3)}, env(safe-area-inset-left))");
+    }
   }
 }
diff --git a/src/objects/_width-container.scss b/src/objects/_width-container.scss
@@ -5,15 +5,37 @@
   // On mobile, add half width gutters
   margin: 0 $govuk-gutter-half;
 
+  // Add safe area (e.g. iPhone X, Google Pixel 3)
+  @supports (margin: unquote("max(0px)")) {
+    // Use safe area or mobile margin, whichever is larger
+    // Escaped due to Sass max() vs. CSS native max()
+    margin-right: unquote("max(#{$govuk-gutter-half}, env(safe-area-inset-right))");
+    margin-left: unquote("max(#{$govuk-gutter-half}, env(safe-area-inset-left))");
+  }
+
   // On tablet, add full width gutters
   @include govuk-media-query($from: tablet) {
     margin: 0 $govuk-gutter;
+
+    // Add safe area (e.g. iPhone X, Google Pixel 3)
+    @supports (margin: unquote("max(0px)")) {
+      // Use safe area or tablet margin, whichever is larger
+      // Escaped due to Sass max() vs. CSS native max()
+      margin-right: unquote("max(#{$govuk-gutter}, env(safe-area-inset-right))");
+      margin-left: unquote("max(#{$govuk-gutter}, env(safe-area-inset-left))");
+    }
   }
 
   // As soon as the viewport is greater than the width of the page plus the
   // gutters, just centre the content instead of adding gutters.
   @include govuk-media-query($and: "(min-width: #{($govuk-page-width + $govuk-gutter * 2)})") {
     margin: 0 auto;
+
+    // Since a safe area may have previously been set above,
+    // we need to duplicate this margin that centers the page.
+    @supports (margin: unquote("max(0px)")) {
+      margin: 0 auto;
+    }
   }
 
   @include govuk-if-ie8 {

diff --git a/src/template.njk b/src/template.njk
@@ -8,7 +8,7 @@
   <head>
     <meta charset="utf-8" />
     <title>{% block pageTitle %}GOV.UK - The best place to find government services and information{% endblock %}</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
     <meta name="theme-color" content="{{ themeColor | default('#0b0c0c') }}" /> {# Hardcoded value of $govuk-black #}
     {# Ensure that older IE versions always render with the correct rendering engine #}
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />