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

[colinrotherham]

Noticed this a while ago, thought I'd contribute a new feature for it.

GOV.UK Frontend doesn't support the dreaded "notch" (or Display Cutouts as they're known) on various new devices. See the unused white area on the left hand side here:

I did a quick check and we now have:

• iPhone X
• iPhone Xs
• Google Pixel 3
• OnePlus 6
• Huawei P20
• LG G7
• Nokia 6.1

The safe-area-inset-* variables were added in iOS 11, and recently Android P has added support via Chrome for Android 69: https://www.chromestatus.com/feature/5710044637167616

Firefox just added support in v65:
https://bugzilla.mozilla.org/show_bug.cgi?id=1462233

Before

After

This pull request adds the initial support to patch .govuk-width-container

[NickColley]

Something to think about:

The env() function shipped in iOS 11 with the name constant(). Beginning with Safari Technology Preview 41 and the iOS 11.2 beta, constant() has been removed and replaced with env(). You can use the CSS fallback mechanism to support both versions, if necessary, but should prefer env() going forward.

Also worth checking the @supports query

It is important to use @supports to feature-detect min and max, because they are not supported everywhere, and due to CSS’s treatment of invalid variables, to not specify a variable inside your @supports query.

[colinrotherham]

@NickColley Yeah Apple quickly backtracked on constant() as its quite rightly a variable! I chose not to support iOS 11.0 and 11.1 and only target the standard spec instead.

Thanks for the comment about @supports and variables though, I was taking my guidance from the WebKit article which originally suggested doing that (they've added yellow update boxes now, which clears things up).

I've added a new version with a simpler test:

/* 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))");
}

Since Sass already has a max() we had to do some horrible escaping with unquote() to avoid it, so the native max() survives into the output CSS without any warnings.

This example outputs the following CSS:

@supports (margin: max(0px)) {
  .govuk-width-container {
    margin-right: max(15px, env(safe-area-inset-right));
    margin-left: max(15px, env(safe-area-inset-left));
  }
}

[colinrotherham]

If anyone has a phone with a "notch" it's deployed here to test out:
https://govuk-frontend-review-pr-1176.herokuapp.com/examples/template-default

Whilst browser support has arrived, I'm not sure if the OS always sets the safe-area-inset-* variables for it to work across all notched devices. It'll likely get better over time though.

Should look like the After screenshot above.

Thanks

[paulwaitehomeoffice]

Looks good to me (iPhone XS Max, iOS 12.1.2).

I’ve got an old iPhone X at home which I can probably restore to an earlier version of iOS tonight, if it'd help to test there too.

[36degrees]

Over the next few weeks we're planning to add a number of example pages to the review app in preparation for an audit against WCAG 2.1.

If it's OK with you, I think it'd be worth waiting until we've got those example pages added, as I think they'll be an ideal way to test that this going to do what we want in different contexts.

[colinrotherham]

@36degrees Sounds good to me. I'll keep this rebased with master in the meantime.

[colinrotherham]

Rebased with latest master.

Good to see it in action with the new full page example @NickColley.

[NickColley]

@colinrotherham exciting, we will have a lot more examples in the review app by the end of the week, then we can merge this in once we're happy :)

[NickColley]

We've updated the review application to include pages that cover as much as GOV.UK Frontend as possible so I think this is ready for review.

If you could bring this branch up to date with the current repository (master), we can give it another look. 😄

[colinrotherham]

@NickColley Done 😊

[NickColley]

I'm wondering if it's a bit too tight at the moment? I've found one example where number lists can be blocked slightly, and it optically feels really close.

https://govuk-frontend-review.herokuapp.com/full-page-examples/announcements

Potentially we might want to keep the gutters the same width but add the additional spacing on top for these notches.

This would make it render nicely fullscreen while keeping the layout the same.

For example on http://localhost:3000/full-page-examples/how-do-you-want-to-sign-in

I tried something like

@supports (margin: calc(env(safe-area-inset-left))) {
    margin-right: calc(#{govuk-spacing(3)} + env(safe-area-inset-right));
    margin-left: calc(#{govuk-spacing(3)} + env(safe-area-inset-left));
}

Note here that I'm not using the gutter units since the notch gives a much bigger optical gap between the two, so I'm using a custom spacing value that 'feels' right.

There's an article that talks about this optical spacing and sizing versus reality: https://medium.com/@lukejones/optical-adjustment-b55492a1165c

This then gives some more room for things like numbered lists

Pinging @dashouse to see what he thinks on this one.

[colinrotherham]

@NickColley These new example pages are so much better. Hadn't realised the numbered lists hang slightly off to the left—definitely looks too tight now! Should they hang off though?

I've chosen to use $govuk-gutter-half instead? Feels better (same size too?)

// Add safe area (e.g. iPhone X, Google Pixel 3)
@supports (padding: unquote("max(calc(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)}, calc(#{$govuk-gutter-half} + env(safe-area-inset-right)))");
  padding-left: unquote("max(#{govuk-spacing(3)}, calc(#{$govuk-gutter-half} + env(safe-area-inset-left)))");
}

I've pushed up what you see above (added both max/calc into @supports but made sure the variable name isn't included) which you spotted in #1176 (comment).

Same logic applied to the skip link should it be visible on other notched devices in future.

It's looking good! Thanks

[colinrotherham]

Can we trigger a new Heroku build too please?

[hannalaakso]

@colinrotherham Done 👍

[dashouse]

Sorry I'm late to comment. The <ol> style doesn't look great to me in general (nothing to do with this PR).

However, without doing much of a deep dive the only way I can think to fix this would be to change the padding-left to a number that would stop the numeric bullets breaking out of the layout (when two digits).

I was playing with list-style-position: inside; and losing the padding all together but in that scenario the list content wraps under the number despite it fixing the overflow.

[NickColley]

@dashouse sounds good to raise as a separate issue regarding those specific list styles then...

Could you review the spacing that Colin has proposed originally and give any feedback on what you think we should be aiming for?

[dashouse]

I think the changes that were made or this reason look really good (based on the screen shots). So I'd go with the bigger gutter as suggested anyway and we'll look at the <ol> style separately too.

[NickColley]

@dashouse sweet thanks for that, feel free to suggest any specific spacing as I kinda just fudged it and went with what felt OK.

[dashouse]

Really happy with it feel wise in browser stack, can't really see the outputted units but for something like this I think it's as much about feel as anything...

[colinrotherham]

@dashouse @NickColley That's fab, glad you like it.

The current pull request includes Nick's suggestion (albeit using $govuk-gutter-half vs. govuk-spacing(3)) but let me know if you need anything else 😊

[colinrotherham]

I've resolved all the review comments.

They're on outdated diffs so add more if you need any other tweaks!

Thanks

[NickColley]

Thanks for making adjustments based on the feedback, I've tested this in browser stack and I'm happy with this.

This is a really neat polish feature and I love that you thought about devices in the future too. 👍

Will need a second approval, preferably from @dashouse

[dashouse]

Looks great to me 👍 💯

[36degrees]

Great stuff, thanks @colinrotherham 👍

[NickColley]

Will try to release this next week 👍 https://github.com/alphagov/govuk-frontend/milestone/18