amp app banner is not showing on Safari

[omar-dulaimi]

What's the issue?

We recently implemented amp app banner and worked fine on the browsers we tested except for Safari.

How do we reproduce the issue?

1. In page head we added this:

    <script
        async
        custom-element="amp-app-banner"
        src="https://cdn.ampproject.org/v0/amp-app-banner-0.1.js"
    ></script>

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

2. Under body, first child, we added this markup:

    <amp-app-banner
        layout="nodisplay"
        id="our-app-banner"
        style={{
            top: '0px',
            height: '40px',
            minWidth: '343px',
        }}
    >
        <InstallMobileAppBar />
    </amp-app-banner>

3. And this is how we wrote our InstallMobileAppBar component:

       <div className="install-mobile-app-bar">
        <div id="install-app-panel" className="install-app-panel">
            <div
                style={{
                    display: 'flex',
                    minWidth: '202px',
                    marginRight: '24px',
                }}
            >
                <div
                    style={{
                        flexDirection: 'column',
                        textAlign: 'right',
                        marginRight: '5px',
                    }}
                >
                    <div
                        style={{
                            fontSize: '12px',
                            fontWeight: 'bold',
                        }}
                    >
                      text
                    </div>
                    <div
                        style={{
                            fontSize: '8px',
                        }}
                    >
                        text
                    </div>

                    <div className="banner-stars">
                        <Star />
                        <Star />
                        <Star />
                        <Star />
                    </div>
                </div>
                <div className="app-banner-logo">
                    <amp-img
                        alt="khareta-banner-logo"
                        src="/images/icons/icon-96x96.png"
                        width="50"

height="50"
                        layout="fixed"
                    ></amp-img>
                </div>
            </div>
            <div
                style={{
                    display: 'flex',
                }}
            >
                <button className="open-button" open-button="open-button">
                    download app now
                </button>
            </div>
        </div>
    </div>

What browsers are affected?

Safari 14.0 (15610.1.28.1.9, 15610)
MacBook Pro (Retina, 15-inch, Mid 2015)
macos 10.15.7

Which AMP version is affected?

2010132225003

[joshcp]

Has this been resolved?

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.