Ionic in web. Hide browser address bar

Ionic Framework
21

Please guys give a like to that thread to let the authors considering a solution in next releases: https://github.com/ionic-team/ionic/issues/19081

22

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

23

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.

[1] https://bugs.webkit.org/show_bug.cgi?id=198277#c14

24

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

25

No, it does not seem to be solved.

26

Any update on that issue?

27

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.

28

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?

29

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.

30

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

html{
  height: 200vh;
}

tested only on ios 15.2

31

This post was flagged by the community and is temporarily hidden.

32

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