Change the Address Bar background color on Safari IOS with CSS

user_17492705 0
Viewed 1929

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

mobile-safari css html ios
1 Answers

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

user_174927050
Related