White Bars in Safari on iPhone X/11/12

Resolved qzdqzdqz
(@zeldemir)

3 years, 4 months ago

Hello,

Thanks for your plugin. Awesome.

There is a small problem with the plugin, with white bars on Safari on iPhone X/11/12 (with the notch). The problem is described precisely here:
https://stephenradford.me/removing-the-white-bars-in-safari-on-iphone-x/

This is how it displays on my site (the dark background does not fill the entire screen):
https://drive.google.com/file/d/1rAaUCeMLK9mrB54a6S54P5reiAd4zoXd/view?usp=sharing

And when I zoom, the image stays in the white frame:
https://drive.google.com/file/d/13UEuwT2uDwFQjhEWpq05ZW0Te7mzTM6W/view?usp=sharing

If you have an iPhone X/11/12 (with the notch) you can see the problem on any site that uses the plugin I think.

Thank you very much for your work

Viewing 1 replies (of 1 total)

Plugin Author Arno Welzel
(@awelzel)

3 years, 4 months ago
The problem is, that the white bars come from your website and my plugin can not be bigger than your website is because it is part of the content of your website. So if you want to have your website filling the screen without white bars, you need to apply the suggested modifications on https://stephenradford.me/removing-the-white-bars-in-safari-on-iphone-x/ to your website itself.

Iteration 1: apply the background color of your website to the white bars using CSS

Add the suggested META attribute:

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

and then add a CSS rule for the body which adds margins so the side bars won’t be used for content but the background color still applies to the bars:
```
body {
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
```
Iteration 2: modification of the site layout

With the META attributes applied you might also experiment with a content div inside the body which gets the padding instead of the body element – then the lightbox should fill the whole screen while your content stays within the safe area:
```
#maincontent {
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
```
```
<body>
  <div id="maincontent">
    
  </div>
</body>
```
All this is untested – I don’t have an iPhone X/11/12, so I can’t test this. But you should get the idea. And again: my plugin can not do this! It is limited to the body element of your website and can’t fill anything outside that. I also can not change the META attributes of a website with my plugin – this is part of your template.
- This reply was modified 3 years, 4 months ago by Arno Welzel.

Viewing 1 replies (of 1 total)

The topic ‘White Bars in Safari on iPhone X/11/12’ is closed to new replies.