2

I am building a PWA and finding it difficult to hide the IOS safari navbar (address bar) on scrolling, I tried all the solution available but unfortunately, nothing helped. Is there any way to hide the address bar on scrolling for iPhone (IOS 7+) safari?

header.scss

display: flex;
padding: 0 16px;
width: 100%;
align-items: center;
color: white;
position: absolute;
background-color: #353f50;
top: 0;
height: 64px;
z-index: 2;

footer.scss

  position: absolute;
  bottom: 0;
  display: flex;
  justify-content: space-around;```

router-outlet content has height: calc(100vh-64px)

Current output:
![Current](https://i.imgur.com/mapbX0i.jpg)

Expected:
![Expected](https://i.imgur.com/eCbCUUI.jpg)
Community
  • 1
  • 1
Madhavan Sundararaj
  • 267
  • 1
  • 5
  • 17

2 Answers2

1

Add this meta tag to the head of index.html

<meta name="apple-mobile-web-app-capable" content="yes">

https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

nll_ptr
  • 864
  • 8
  • 11
1

If you implemented a PWA, you can specify how it should be rendered in the browser by setting the display property in the web manifest file.

I wrote an article explaining in details the different display values and how the applications will look like.

In your case, I would use display: standalone as it will remove the address bar and open the application in a separate window (not the same one used by the browser).

The layout would be like the following (note the absence of address bar):

enter image description here


If this would not work, as iOS has terrible PWA support, you can:

  1. Add <meta name="apple-mobile-web-app-capable" content="yes"> tag

or

  1. Use the pwacompat library
Francesco
  • 9,947
  • 7
  • 67
  • 110