Problems closing Lightbox Modal on iPhone X

I Need Help
1

I have found a problem with full screen lightbox modals on iPhone 10. If I open a lightbox image on the iPhone 10 in landscape mode, the “close button” (X) at the top right doesn’t work. This is because the screen now goes “behind the notch” at top top where the speaker and front camera is.

I opened the same page on an iPhone 6 in landscape and didn’t have any problem clicking the (X) to close the lightbox modal.

Also: the hamburger menu is also positioned to the right of the scrollbar when in landscape mode. However in this case, I can press and open the menu, and close it by pressing the close (X).

Here is the page where you can check this out:

As I said, I only see this problem (can’t click on the (X)) on my iPhone X. I am pretty sure this is because the viewport goes into the area where the notch at the top is.

What confuses me though, is that the hamburger menu and its close button don’t seem to be affected by this - only the lightbox modals.

On StackOverflow there are a few posts reporting this problem …

I made some screenshots showing this:

lighbox-close-btn-iphone10-landscape
lighbox-close-btn-iphone10-landscape2743×1361 500 KB

lightbox-close-btn-iphone10-portrait
lightbox-close-btn-iphone10-portrait1361×2744 309 KB

2

Hey @gary,

Yeah, same result on iPhone 11.

It’s probably fixable with CSS and the new(ish) Enviroment variables.?

I’m not on my Mac. But what does Blocs put in the viewport meta tag. It may need updating?.

3

I saw one guy online suggesting…

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
html {
  padding: env(safe-area-inset); 
}

I haven’t tested it. But apparently it puts the viewport under the notch but not your content.

1 Like
4

thanks I’ll give that a try!

5

Hi @Gary, have you ever managed to fix it ? As I am having the same issue.

6

I have faced the same problem while unboxing it.