9

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.

Djave
  • 8,595
  • 8
  • 70
  • 124
  • Are you using the correct [Viewport meta tag](https://stackoverflow.com/a/56293045/746736)? – Turnip Apr 30 '20 at 15:44
  • @Turnip yes I am, sorry I forgot to include that in the original post. `` – Djave Apr 30 '20 at 15:46
  • 5
    Just jumping in here to say that I'm currently having the same problem. The viewport tag works fine on Safari but not Chrome (iPhone 11 Pro Max) – user2719094 May 05 '20 at 19:43
  • Ditto. Did anyone find a solution for this? – Lucas Sep 14 '20 at 19:47
  • @Lucas I'm afraid not. I think the best thing to do would be report it as a bug. I did, but my report has since been closed with one spam answer. https://support.google.com/chrome/thread/43657915?hl=en – Djave Sep 15 '20 at 07:18
  • did you find solution for this ? i have same problem –  Feb 01 '21 at 23:51
  • I also have the same problem :/ – jmdavalos Feb 28 '21 at 15:08
  • Same Here, seems that either the Chrome Team doesn't see it important, because Edge does work. – Gerardo Buenrostro González Sep 22 '21 at 17:30
  • Has anyone found a solve for this? Still seems to be the case. iOS Safari works, iOS Chrome does not – James Jul 28 '22 at 01:08
  • @James I'm afraid not so far... although I did find another issue was caused by codepen's iframe styling, so it's worth testing it outside of there (I'm sure you are already) – Djave Jul 28 '22 at 08:55
  • I think that the env inset value work correctly, so if we can detect iOS Chrome and apply negative values it should solve the problem – std4453 Jan 06 '23 at 18:45

0 Answers0