3

I seem to have an issue with iOS 7.1's minimal-ui feature when used in conjunction with the smart app banner.

I have a gap at the top of the page, with the app banner overlaying the page content.

I've turned all styles off in my page, so I know its not my own CSS causing this.

Is this an iOS bug?

Edit: Demo: demo

and a screenshot:

Gap above page

Charles
  • 50,943
  • 13
  • 104
  • 142
Andrew Bullock
  • 36,616
  • 34
  • 155
  • 231
  • The size of the bar looks to be the same size as the status bar, do you have code to try to offset your page by the status bar height? – Jon Winstanley Mar 26 '14 at 14:24
  • See the demo link: http://blog.muonlab.com/wp-content/uploads/2014/03/ios.html You can cause it with zero content/scripts/css. iOS bug methinks. sigghhhh – Andrew Bullock Mar 26 '14 at 15:43

2 Answers2

1

If you don't mind using a bit of javascript here is how I fixed it.

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0, minimum-scale=1.0, width=device-width, minimal-ui" />
<script>
    document.body.scrollTop = 0;
    document.write('<meta name="apple-itunes-app" content="app-id=XXXXXXXX"/>');
</script>

This basically forces a scroll before telling Safari to use the banner.

Nikhil Verma
  • 41
  • 3
  • This didn't work for me, in that the document.write didn't cause the smart banner to show up at all (iOS 7.1.1). We ended up just removing `minimal-ui`, as it wasn't absolutely essential. – ehsanul May 14 '14 at 18:03
0

The minimal-ui viewport property is no longer supported in iOS 8 (see iOS 8 Release Notes).

Therefore, my recommendation is to not use minimal-ui at all and the smart banner will display just fine.

Mobiletainment
  • 22,201
  • 9
  • 82
  • 98