“The Notch” and CSS

rfp-robotRFP ROBOT: Website Request for Proposal Generator

The time has come for a new website (or website redesign), which means you need to write a website request for proposal or web RFP. A Google search produces a few examples, but they vary wildly and don’t seem to speak really to your goals for developing or redesigning a new website. You need to write a website RFP that will clearly articulate your needs and generate responses from the best website designers and developers out there. But how?

Have no fear, RFP Robot is here. He will walk you through a step-by-step process to help you work through the details of your project and create a PDF formatted website design RFP that will provide the information vendors need to write an accurate bid. RFP Robot will tell you what info you should include, point out pitfalls, and give examples.


Apple’s iPhone X has a screen that covers the entire face of the phone, save for a “notch” to make space for a camera and other various components. The result is some awkward situations for screen design, like constraining websites to a “safe area” and having white bars on the edges. It’s not much of a trick to remove it though, a background-color on the body will do. Or, expand the website the whole area (notch be damned), you can add viewport-fit=cover to your meta viewport tag.
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, viewport-fit=cover”>

Then it’s on you to account for any overlapping that normally would have been handled by the safe area. There is some new CSS that helps you accommodate for that. Stephen Radford documents:

In order to handle any adjustment that may be required iOS 11’s version of Safari includes some constants that can be used when viewport-fit=cover is being used.

safe-area-inset-top
safe-area-inset-right
safe-area-inset-left
safe-area-inset-bottom

This can be added to margin, padding, or absolute position values such a top or left.
I added the following to the main container on the website.
padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left);

There is another awkward situation with the notch, the safe area, and fixed positioning. Darryl Pogue reports:

Where iOS 11 differs from earlier versions is that the webview content now respects the safe areas. This means that if you have a header bar that is a fixed position element with top: 0, it will initially render 20px below the top of the screen: aligned to the bottom of the status bar. As you scroll down, it will move up behind the status bar. As you scroll up, it will again fall down below the status bar (leaving an awkward gap where content shows through in the 20px gap).
You can see just how bad it is in this video clip:

Fortunately also an easy fix, as the viewport-fit=cover addition to the meta viewport tag fixes it.
If you’re going to cover that viewport, it’s likely you’ll have to get a little clever to avoid hidden content!

I think I’ve fixed the notch issue in landscape 🍾 #iphoneX pic.twitter.com/hGytyO3DRV
— Vojta Stavik (@vojtastavik) September 13, 2017

“The Notch” and CSS is a post from CSS-Tricks
Source: CssTricks

Posted on September 16, 2017 in Apple, Austin Web Designer, css, Design, drupal design,, Drupal Developer, drupal developer austin, Drupal Development, Drupal Development Austin, Drupal Support, Expert Drupal Development, iOS, iPhone, Safari, The, Twitter, Video, Web Design Services, website

Share the Story

Back to Top