Why are smart app banners partially/completely hidden in Safari when I have viewport specified?

Question

I want to add smart app banners to link to an app in the Apple App Store. It seems to work fine when I don't have a viewport metatag specified. If I have a fully mobile friendly viewport, the smart app banner is hidden completely "behind the address bar" after page load, and if I have a viewport with width 840 specified, the smart app banner is partially hidden by the address bar.

Why is this, and can I make it so that the smart app banner is always completely shown?

Working, no viewport

The smart app banner is shown correctly. You can scroll to hide it.

<meta name="apple-itunes-app" content="app-id=284882215">

Test page

Completely hidden, responsive

The smart app banner is hidden behind the address bar (you can see a blurry blue Facebook logo). You can scroll to hide/show it.

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="apple-itunes-app" content="app-id=284882215">```

Test page

Partially hidden, viewport width=840

The smart app banner is partially hidden behind the address bar. You can scroll to hide it/show it completely.

<meta name="viewport" content="width=840, user-scalable=yes" />
<meta name="apple-itunes-app" content="app-id=284882215">

Test page

This can only really be tested in Safari on a real iPhone, and it is easiest to do it in Private Mode, as the appearance of the smart app banner changes if you scroll / reload the page.

Answer 1

Initially force window to scroll top solved the issue for me.

<script type="text/javascript">
    $(window).load(function() {
        $(window).scrollTop(-100);
    });
</script>

Answer 2

Use <meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1"> and it would show the smart banner.