With ZURB’s latest Foundation release of v6.7.2 comes a global settings option to enable
safe-padding-inset for devices with notches (iPhones). With a quick tweak to a new variable in
_settings.scss, this CSS property can be easily enabled. I activated it in my personal project boilerplate to play with it on my iPhone, only to find it was not rendering correctly.
Rather than an attractive full-width background-image, there was only even more side padding to the body. It was frustrating – I just could not figure out what I was doing wrong. After much head bashing and Googling I realized the issue.
If you want to activate
safe-padding-inset on your website, be it with Foundation or any other platform, your
<meta viewport> needs to be updated in your
<head> accordingly. Be sure the following line is present in the
<head> of every page and you’ll be good to go.
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
Thanks for reading!