Black bottom in Iphone ios15 safari on material ui dialog

Viewed 679

black space in bottom of the page

Recently I started seeing this black screen after the ios 15 updates in the safari browser , I am using react 16, material UI v4.11 and Dialog to render this modal.

2 Answers

It was fixed after I added height:100vh in the HTML tag

If you're like me and you've poured over every single document you could and nothing seems to work, I managed to find something that I deemed good enough.

My solution was to figure out where the black colour was coming from and just change it to match the colour of my footer.

In your index.html, change this meta tag

 <meta name="theme-color" content="#000000" />

and change the colour the match your content. Mine was white.

<meta name="theme-color" content="#FFFFFF" />

Black bar should now be white so it's no longer noticeable.

The downside to this is that if this is happening in multiple places and you have multiple colour schemes on the bottom, you're stuck with that one colour.

But if your app is relatively simple and this is only happening in one place (for me, an input form), then this might be a good enough solution.

Related