39

When setting the meta tags

apple-mobile-web-app-capable

and

apple-mobile-web-app-status-bar-style

to create a full screen web app, the iOS status bar is at the top of the screen (translucent) and there's an additional empty black bar at the bottom.

Here's my code:

<!DOCTYPE html><html><head><meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
</head>
<body><h1>Test</h1>
<p>Capture a photo using camera</p>
<input type="file" capture="camera" accept="image/*">
</body></html>

There's an additional problem with the tag apple-mobile-web-app-status-bar-style. After taking and accepting a photo via camera input black bars appear on the sides of the screen. I'm using iOS8 GM on an iPad3.

I think this might be an iOS 8 bug but Apple doesn't seem to care about my bug report :(

Does anyone know a solution/workaround for this problem?

Update 1: Apple marked my bug report as Duplicate (Closed) on Sept. 19th.

Update 2: Bug is fixed in iOS 8.3 Beta 1

Sumner Evans
  • 8,951
  • 5
  • 30
  • 47
aLiEnHeAd
  • 579
  • 1
  • 7
  • 20
  • This problem existed in iOS7 as well. I believe it is because when the photo-roll app open (to pick a file), it has code in it that sets that bar to black and overrides your setting from the meta tag. Unfortunately I don't know how to solve this other than hitting the home screen button and re-entering the app from the icon. – FunkyMonk91 Sep 17 '14 at 18:21
  • 1
    @FunkyMonk91 I can't repoduce this issue on my iOS7 iPad3. It only happens on iOS8. Btw. iOS8 GM is now the iOS8 final :-( – aLiEnHeAd Sep 18 '14 at 06:10
  • Definitely haven’t this (exact same) problem on iOS 7. First thing I saw today on newly installed iOS 8 on ipad. Also some other things as swipe events don’t work any longer, but only in home screen use, not in regular browser. :-( – Garavani Sep 20 '14 at 19:25
  • 3
    It seems that if you start the web app in portrait mode and then turn to landscape, it works correctly. Tested in iOS8.0 Safari – Kimmo Sep 27 '14 at 17:41
  • On my iPhone SE with iOS 11.3 I seem to have a similar problem. When I use a `black` bar, and start the shortcut on one of the landscape sides, there is no status bar. But as soon as I rotate and let the orientation change to portrait, a status bar will be added. Going back landscape, there is now a black bar where there could be a status bar, but it's empty. – luckydonald Jun 14 '18 at 17:33
  • Regarding iOS 11 also see https://stackoverflow.com/q/47063643/3423324 – luckydonald Jun 14 '18 at 17:39

8 Answers8

35

Technically this is not an answer to your question, but I have been documenting my findings while trying to resolve this issue myself, and here is what I've found so far. I was going to post it as it's own question, but figured it would be closed as a duplicate.

On iOS8 devices running pinned web applications. Regarding the tag :

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

From the Apple developer reference:

If content is set to default, the status bar appears normal. If set to black, the status bar has a black background. If set to black-translucent, the status bar is black and translucent. If set to default or black, the web content is displayed below the status bar. If set to black-translucent, the web content is displayed on the entire screen, partially obscured by the status bar. The default value is default.

To enable this functionality, you need to use

<meta name="apple-mobile-web-app-capable" content="yes">

In iOS6 and 7 this works more or less as expected.

In iOS8 this appears to be broken entirely. For example, iOS 8.0.2 running on an iPad Air in portrait has the following behaviour:

  • black results in a transparent background. There is a solid black bar at the bottom of the screen
  • default or not setting a value results in a transparent background and a solid white bar at the bottom of the screen
  • black-translucent results in a transparent background, but no annoying bars at the bottom of the screen

In all cases, the content appears "beneath" the bar. i.e. the bar does not push content down.

On an iPhone6, the status bar does not display at all in landscape. In portrait however, the following behaviour:

  • black works as expected, and content is pushed down (wow!!!)
  • default has an empty white bar at the top
  • black-translucent results in a transparent background, with content underneath

I have not had the opportunity to test on an iPhone6+

The iOS simulator in xcode does not appear to give reliable reproduction of the behaviour that occurs on real devices.

I have tried changing it dynamically with javascript, but it appears to have no effect.

Just to make this even more interesting/frustrating, you can COVER the status bar (clock/wifi etc) by setting styles on the html element. e.g.

  html {background: black;}
  body {background: #DDD; margin-top: 20px}

The same issue documented elsewhere:

Simon Lang
  • 40,171
  • 9
  • 49
  • 58
7

The problem existed since iOS6. I had previously posted to Apple's bug report with all details you are providing today, and later was marked as duplicate. This was 2 years ago and unfortunately today I discovered that it got even worst.

The original bug report has id 11966202 and is still (Open). Since you have the same problem the only thing you could do is confirm the bug which will escalate it and they will fix it in the future.

As I said I am looking for a solution for more that enough to tell you there is no workaround. The problem can be reproduced on all iOS devices, but behaves differently based on the screen size and orientation.

With iOS 8 we now experience a glitch where the viewport becomes just a very small portion of the screen and it closes/crashes completely.

EDIT: Apple Ticket is now closed

As of Monday, Apple had closed the ticket and I can confirm that using 8.1 finally resolves the camera and status bar issues I was having. Hope it resolved your issues too :)

Sumner Evans
  • 8,951
  • 5
  • 30
  • 47
fakedob
  • 145
  • 3
  • 2
    I noticed that when you open WebClip in landscape mode, you get that extra 20px of whitespace at the bottom of screen and it can't be filled at all. Apple completely broke status bar behaviour in latest version of iOS. – Gapipro Sep 24 '14 at 05:26
  • 2
    It is not solved for me using iPad mini and iOS 8.1. Both landscape and vertical modes are still broken. – andig Nov 08 '14 at 18:08
5

The issue comes from using <meta name="apple-mobile-web-app-status-bar-style" content="black">In order to get rid of the black bar at the bottom of your app, you will need to use:<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> Using black-translucent will keep your app looking the same in both iOS7 and iOS8. You will still need to adjust any content at the top of your app to clear the iOS status bar icons.

DrumJammer
  • 51
  • 1
  • 2
    Also, I failed to mention that in order for this solution to take effect, you have to delete your web app from the home screen and re-add it. – DrumJammer Sep 22 '14 at 14:10
  • 1
    Thanks for this tip. At least the black bar at the bottom disappeared. Yet now I have a transparent status bar at the top which I do not like. Either black or no bar at all. But the transparent one sucks in my eyes. I wonder why every new version of software, instead of keeping the good things and developing the bad ones, always brings a bunch of new unseen problems where there weren’t any before? It makes me sick. Not to speak of the lousy Safari 7.1 that came up with this update… – Garavani Sep 22 '14 at 14:37
3

Apple fixed this bug in iOS 8.3 beta 1

aLiEnHeAd
  • 579
  • 1
  • 7
  • 20
2

To expand on all of the above, my solution is:

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

Then create a custom CSS for all the elements that need to shift down by 20px, particularly any position: fixed; top: 0px; that exists in your CSS for normal browser [desktop/mobile] view.

Add the custom CSS into the head section, below CSS links with the following script [my working example]

<script type="text/javascript">
   if (window.navigator.standalone) {
       document.write("<link type=\"text\/css\" rel=\"stylesheet\" media=\"all\" href=\"assets/css/style-body-ios8.css\" charset=\"utf-8\" \/>");
}
</script>

My result is desktop/mobile browser website view is as normal, then website added to home screen as a web app, on launch opens fullscreen, with status bar looking like it used to pre ios8 [fyi, I added a background color of black to my fixed header css for the status bar to show as black background

Tested on iPad/iPhone/iPod running ios 8.0.2 - all good. FYI, tested on old iPod ios 6.1.6 expecting an extra shift down of 20px and wasn't there - bonus!

user1762289
  • 94
  • 3
1

It is worth noting that setting the status bar style to 'black' is working as expected as long as you open the Web App with your iPad in Portrait. Then even if you rotate the iPad the black bar is correctly visible.

The problem is only when you enter the Web App in landscape, at least for me. I am using iPad 3 with IOS 8.1, and I believe it is still the same in 8.3

Sebris87
  • 452
  • 5
  • 10
0

Just add a 20px high div to the top of your app and let that act as that status bar

Stephen O'Sullivan
  • 23
  • 3
  • :) hahaha I waited for this answer! Great. – Garavani Sep 22 '14 at 16:01
  • 3
    Adding 20px high div on top doesn't help because when starting your app in landscape mode you get broken viewport with 20px of empty space at bottom of screen that can't be filled with anything. So if you have a fixed bottom menu it will floating in space with white bar under it. – Gapipro Sep 24 '14 at 05:24
0

apple-mobile-web-app-status-bar-style is inactive in iOS 8. If you add a fixed div on top, only add it for OS 8_0

if (navigator.appVersion.indexOf("OS 8_0 like Mac") > 0) ...
Dux
  • 309
  • 1
  • 5
  • note this check won't work for 8.1... best to use a user agent parser and check for version >= 8 (until this gets fixed - if ever) – Simon Lang Oct 31 '14 at 06:07