Address bar doesn't scroll/hide in mobile Safari or Chrome when viewing Service Portal

[Kourtney3]

I would like the browser address bar to scroll out of view when scrolling down a page and return when scrolling up. This is normal behavior on most websites but Service Portal seems to disable/break this. Is there anything we can do to fix this? I've tried this with and without a fixed navbar to see if there's a difference. Same result.

[Callisonificati]

You cant hide the address bar for a browser. Thats controlled by the browser and not the page.

Some mobile browsers, like Safari on iOS, will hide the address bar as you scroll to save screen space, but this isn't a standard behavior for browsers.

[mspeirs]

The issue I'm seeing is that on Chrome (android), nearly any other site I load will push the address bar up as I scroll down the page. Then when I start to scroll back up the address bar becomes visible again. But for the Service Portal it does not do this. The address bar stays visible and does not disappear when scrolling down. It may be functionality controlled by the browser, but something about the Service Portal is telling the browser not to enable this functionality. So the address bar is using precious screen space that could be better used displaying page content. Maybe it is not standard behavior across all mobile browsers, but it would sure improve the user experience for the many users on Chrome or Safari if the Service Portal worked like other sites in this manner. Maybe it is a css issue.

Having said that, I just decided to check out the css by inspecting the html element on my desktop and I believe the issue is related to this:

html, body {

height: 100%;

}

I added the following to my theme's css to override the default and now the address bar scrolls out of the way as expected in Chrome(android):

html {

  height: initial !important;

}

I have not tested much to see if it has any negative side-effects and I'm not sure if that's the best way to reset it but at least it tells me it can be done.

This thread mentions an AngularJS application having a similar issue due to 100% height being set. It mentions the body height but adjusting just the html height worked for me:

"The 100% height on the body element is also the cause of the address bar failing to hide on scroll on (at least) Android+Chrome. edit: Confirmed same behaviour on iOS+Chrome and iOS+Safari."

[Kourtney3]

I made some time to look into because it was so annoying and found that setting the following CSS in my portal theme fixed the issue for all pages. I've tested on mobile and desktop and haven't found any issues as of yet. Probably could set the default div.page css that's OOB in the desktop media query if you're worried about the change.

/* --- ***************************************** --- */
/* --- full screen in mobile (minimize address bar) --- */
/* --- ***************************************** --- */
div.page {
    height: auto !important;
    width: auto !important;
}

Hope this helps!

[Kourtney3]

Update: 

Neither height: auto !important or height: initial !important works on iOS Chrome. It will work the first time when you reload the page but when going to a new page, the address bar doesn't hide on scroll.

*Safari mobile works with either of these settings.