iOS Chrome not respecting safe-area-inset for notch

3.6k Views Asked by At

I have an issue where a landscape version of Chrome is adding white space to the left and right of my screen.

Example of iOS Chrome notches

Here are the specs:

Browser specs

I have a "kitchen sink" approach where I've tried everything to remove these white bars and make the background fullscreen.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">

And the following CSS:

html{
  margin: env(safe-area-inset);
  padding: env(safe-area-inset);
}


html, body, img{
  width: 100%;
  height: 100%;
  margin: 0;
  box-sizing: border-box;
  padding: 0;
  width: 120vw;

}

img{
  margin: env(safe-area-inset);
  object-fit: cover;
}

Here is a live demo to play with:

https://codepen.io/EightArmsHQ/pen/JjYygPg

I'm getting good results in iOS Safari, but it seems to stop there. Similar issues have been raised env(safe-area-inset-top) not working on Android Pie + WebView 69

I'm wondering if this is a Chrome iOS bug, or if my implementation is incorrect. It's worth noting that Safari does remove the whitespace when these properties are added.

0

There are 0 best solutions below