Update: Answered below!
I have a responsive web page that is optimized for iPads in full screen. Since upgrading to iOS8 though, a new empty bar started appearing at the bottom of the full page app.
I saw a couple of answers suggesting I add a meta tag to the base layout. Mine is an AngularJS app and the following has been added to the index.html:
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<link href="assets/css/tapp2.css" rel="stylesheet">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
<link rel="shortcut icon" type="image/png" href="assets/img/favicon.png"/>
<link rel="apple-touch-icon" href="assets/img/favicon-150X150.png" sizes="150x150">
<link rel="apple-touch-icon" href="assets/img/favicon-72X72.png" sizes="72x72">
<link rel="apple-touch-icon" href="assets/img/favicon-76X76.png" sizes="76x76">
<link rel="apple-touch-icon" href="assets/img/favicon-144X144.png" sizes="144x144">
<link rel="apple-touch-icon" href="assets/img/favicon-152X152.png" sizes="152x152">
<link rel="apple-touch-icon" href="assets/img/favicon-114X114.png" sizes="114x114">
<link rel="apple-touch-icon" href="assets/img/favicon-114X114.png" sizes="120x120">
<link rel="apple-touch-icon" href="assets/img/favicon-57X57.png" sizes="57X57">
But the bar is still there and I'm stuck. Am I missing something here?
