iOS webapp status bar inconsistent

Question

While making a web app I tried to make the status bar transparant but reading through tons of documentation I figured this was deprecated and used default with this as result:

Quite a while in the development process it suddenly changed to this:

and in that one instance it keeps working, no matter how much I reload everything. But I cannot get it to work in other instances.

this is the code in my header on index.php

<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<link rel="apple-touch-icon" href="img/appiconTAD.png">
<!-- <link rel="apple-touch-startup-image" href="img/splashScreen.png"> -->
<meta charset="UTF-8">
<title>take a dare</title>
<link href="css/style.css?v1" rel="stylesheet">
<link href="css/main.css?v1" rel="stylesheet">

Any Ideas?

worth noting that I am on IOS dev beta 11.5

Answer 1

It seems like in iOS 11 status bar doesn't overlap the content anymore when set to black-translucent. So the status shows your apps background-color.