'Change the Address Bar background color on Safari IOS with CSS

I'm building a website and I was starting the cross browser testing, being on Safari on IOS I see that the address bar and the status bar doesn't take the color of the website, searching a bit I find the meta tags for solve that problem

<meta name="theme-color" content="#07070f">
<meta name="msapplication-navbutton-color" content="#07070f">
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="#07070f">

It works for the status bar but in the case of the address doesn't change

Picture showing what I'm explaining

I searched a lot through the internet but I was unable to find a solution for this, I also have the same background color on main, header and footer that the given in the meta tag and a :root style setted with color-scheme: dark

htmlcssiosmobile-safari


Solution 1:[1]

If someone has the same issue that me here's what works for me:

after a bit of struggling searching a solution I see that the problem being on that I haven't declared the body with the background-color of the page (the same as I given to the meta tag) like this

body{
    background-color: #07070f;
}

And in the HTML meta tag:

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

I deduct that this takes the body color and with the content given in black-translucent works fine, but maybe you should try different things to find the correct one, hopefully will help someone

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Steven León

Related Questions