Safari iOS 7.1 minimal-ui and Smart App Banner

Question

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:

Answer 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.

Answer 2

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.