ampproject / ampproject/amphtml

amp app banner is not showing on Safari

Open
#31,084 2 comments 0 reactions 0 assignees View on GitHub
Component: amp-app-banner P2: Soon Stale Type: Bug WG: components
Dominant language
JavaScript
Stars
14.9k
Forks
4.1k
PR merge metrics
No merged PRs in 30d

Description

## 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:

```


```

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



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

>


>

>
style={{
> display: 'flex',
> minWidth: '202px',
> marginRight: '24px',
> }}
> >
>
style={{
> flexDirection: 'column',
> textAlign: 'right',
> marginRight: '5px',
> }}
> >
>
style={{
> fontSize: '12px',
> fontWeight: 'bold',
> }}
> >
> text
>

>
style={{
> fontSize: '8px',
> }}
> >
> text
>

>
>

>
>
>
>
>

>

>

> alt="khareta-banner-logo"
> src="/images/icons/icon-96x96.png"
> width="50"
>

height="50"
layout="fixed"
>





download app now



## 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

Contributor guide

Open the contributing guide

Research direction

Reproduce the supplied amp-app-banner markup on Safari 14.0 and compare it with the browsers where the banner works. Trace the AMP component and custom markup involved, then confirm the banner renders and behaves as expected on Safari without regressing the other tested browsers.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.