From 56f9f57ae4097010af8c5a86654cc1acf8367b64 Mon Sep 17 00:00:00 2001
From: Colin Rotherham <work@colinr.com>
Date: Wed, 6 Feb 2019 16:01:07 +0000
Subject: [PATCH] Accommodate camera notches on new devices (iPhone X, Google
 Pixel 3 etc)

---
 CHANGELOG.md                                  |  9 +++++++++
 docs/installation/examples/webpack/index.html |  2 +-
 src/components/skip-link/_skip-link.scss      |  6 ++++++
 src/objects/_width-container.scss             | 17 +++++++++++++++++
 src/template.njk                              |  2 +-
 5 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b32755df3a..88c933ace7 100644
--- 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
index 3ad7fd69c3..408fb3b6a5 100644
--- 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
index db4b3dc8ac..2d6e3523ef 100644
--- a/src/components/skip-link/_skip-link.scss
+++ b/src/components/skip-link/_skip-link.scss
@@ -11,5 +11,11 @@
 
     display: block;
     padding: govuk-spacing(2) govuk-spacing(3);
+
+    // Add safe area (e.g. iPhone X, Google Pixel 3)
+    @supports (padding: env(safe-area-inset-left)) {
+      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
index 2f38e8bc11..146615a166 100644
--- a/src/objects/_width-container.scss
+++ b/src/objects/_width-container.scss
@@ -5,15 +5,32 @@
   // On mobile, add half width gutters
   margin: 0 $govuk-gutter-half;
 
+  // Add safe area (e.g. iPhone X, Google Pixel 3)
+  @supports (margin: env(safe-area-inset-left)) {
+    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: env(safe-area-inset-left)) {
+      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;
+
+    // Add safe area (e.g. iPhone X, Google Pixel 3)
+    @supports (margin: env(safe-area-inset-left)) {
+      margin: 0 auto;
+    }
   }
 
   @include govuk-if-ie8 {
diff --git a/src/template.njk b/src/template.njk
index b345e538c2..f6b27c794b 100644
--- 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" />