Ionic in web. Hide browser address bar

Please guys give a like to that thread to let the authors considering a solution in next releases:

Any update on this guys? It seems the github conversation has been locked

This is a big issue for us, we well. I am surprised to see Ionic not supporting this important piece of mobile-browsing UI.

For us, PWAs are not a solution because iOS hobbles PWAs be denying them background play (which is allowed in Safari).[1] Add this to the fact that the Apple App store has become increasingly arbitrary about what apps they allow, and support for mobile browsing should be a high priority.


Hi guys - any update on that issue please? It is now impossible to access the github issue page? Does it means you solved the issue? Thx

No, it does not seem to be solved.

Any update on that issue?

Well, it`s a dirty one, but it is obviously better than nothing.

html {
  height: 101vh !important;
  max-height: none !important;
  overflow: scroll !important;

This will force your app to be longer than screen window, so scrolling down will cause bar hiding.
Important notice: you will never see any changes untill you open app page in HTTPS. Http connected page (localhost development also) will never hide address bar.

1 Like

I pasted that into my global scss and didn’t see any change on my https production site running ionic angular. Did you paste it somewhere else?

To improve upon @krodetsa’s great workaround, put this at the bottom of your Ionic src/theme/variables.scss file:

html.plt-mobileweb.ios {
    height: 101vh;
    max-height: none;
    overflow-y: scroll;

Note: no need or !important overrides with the html.plt-mobileweb.ios selector. This will also only apply to mobile safari and not cause multiple nested scrollbars in other browsers.

1 Like

I am not sure the logic behind, but I found out that setting this simple css fixes the problem on both of the upside and downside.

Setting quite large height on html tag

  height: 200vh;

tested only on ios 15.2

My solution above is not valid in iOS 16 :confused:

it’s 2024 and ionic 8 is realesed but still facing this issue. I am very disappointed with the team and not providing solution for this very know and major problem. :pensive:

This worked for me. Thanks!

EDIT: works in Safari but not Chrome on iOS unfortunately.

Also an issue for me. I’m using ion-content and ion-tabs.
When implementing that ‘height hack’, the iOS address bar is shrinking only when I try to scroll on the ion-tab-bar. When scrolling inside my ion-content, nothing happens.