iPhone X in landscape mode

[winzig]

When in landscape mode on iPhone X (and presumably XS, XS Max, XR though I don't have those to test with at the moment), the fullscreen dark background doesn't extend fully to the sides of the display. Instead you see your website background bleeding through on the sides.

The issue in general is illustrated on this page, though I hope there's also a CSS-specific fix that could be applied to flickity-fullscreen, rather than our entire website design.

The image gives you a sense of the issue:

I am able to reproduce this problem on the fullscreen demo page.

[desandro]

Thanks for reporting this issue. This looks to be a browser bug. Mobile safari itself does not allow its webview to expand into the notch area. Bummer. 😩

[winzig]

@desandro Unless I'm misunderstanding what you mean, I don't think this is necessarily true. I changed the viewport on the page as described in the page I linked to on the codepen sample, and this works:

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

My pen is here: https://codepen.io/tomwinzig/pen/YOBgEQ

In our case we don't want our entire site content to bleed into those zones, so we can't use the viewport fix for the issue, but perhaps there is an equivalent effect that can be applied on just the flickity fullscreen divs?

[desandro]

Ah! I did not know about viewport-fit. You could try changing it dynamically on fullscreenChange

[winzig]

I experimented with trying to use @viewport in CSS, but was unable to get that to work. If I could get that working, then I was going to experiment with changing the CSS dynamically in fullscreenChange, but didn't get that far.