Mobile - Browser addreds bar doesn't hide when scrolling with Ionic - web

Question

When an Ionic App is deployed in the web and you access it from a phone, the bar address never dissapears. I know this is because of ion-content or something similar but I haven't found any work around or info about this, only an issue in github from Ionic 2.
Isn't there any work around to hide the browser address bar yet? This is a really downcoming to Ionic...

Answer 1

I did it in ionic5. But my solution removes navigation animation.
And not perfectly clean. But no one knows how to hide the mobile access bar.
So reveal my solution.
If you find a better solution, please let me know :)
in global.scss
//mobile access bar auto hide system
.plt-mobileweb {
ion-action-sheet {
position: fixed;
}
ion-modal {
position: fixed;
}
ion-picker {
position: fixed;
}
body {
max-height: initial;
height: initial;
overflow: scroll;
position: static;
overscroll-behavior-y: initial;
-webkit-overflow-scrolling: touch;
}
body.backdrop-no-scroll {
overflow: hidden;
}
ion-app.ion-page {
left: initial;
right: initial;
top: initial;
bottom: initial;
display: initial;
position: initial;
flex-direction: initial;
justify-content: initial;
contain: initial;
overflow: initial;
}
ion-router-outlet {
left: initial;
right: initial;
top: initial;
bottom: initial;
position: initial;
contain: initial;
z-index: initial;
overflow: initial;
}
ion-router-outlet {
.ion-page {
left: initial;
right: initial;
top: initial;
bottom: initial;
display: initial;
position: initial;
flex-direction: initial;
justify-content: initial;
contain: initial;
overflow: initial;
}
ion-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 11;
}
ion-footer {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 11;
}
ion-content {
display: initial;
position: initial;
width: initial;
height: initial;
font-family: var(--ion-font-family, inherit);
contain: initial;
flex: initial;
margin: initial;
padding: initial;
}
ion-tabs {
display: initial;
position: initial;
top: initial;
left: initial;
right: initial;
bottom: initial;
flex-direction: initial;
width: initial;
height: initial;
contain: initial;
z-index: initial;
}
div.tabs-inner {
position: initial;
flex: initial;
contain: initial;
padding-bottom: 56px;
}
ion-tab-bar {
width: 100%;
}
ion-tab-bar[slot=top] + div.tabs-inner {
padding-bottom: 0;
}
ion-tab-bar[slot=top] {
position: fixed;
top: 0;
left: 0;
right: 0;
}
ion-tab-bar[slot=bottom] {
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
}
}
and make directive
#Directive({
selector: 'ion-content'
})
export class MobilewebContentDirective {
minHeight = {
ios: 50,
md: 56
}
constructor(
private el: ElementRef,
private plt: Platform
) {
}
ngOnInit() {
if(this.plt.is('mobileweb') || this.plt.is('desktop')) {
const observer = new MutationObserver(mutations => {
for(let i = 0; i < mutations.length; i++) {
const children = this.el.nativeElement.shadowRoot.children;
let main:HTMLElement | null = null;
let background:HTMLElement | null = null;
for(let i = 0; i < children.length; i++) {
if(children[i].tagName === 'MAIN') {
main = children[i];
}
if(children[i].id === 'background-content') {
background = children[i];
}
}
if(background) {
background.style.position = 'fixed';
}
if(main) {
//default setting for body scroll
observer.disconnect();
main.style.position = 'relative';
main.style.bottom = 'initial';
main.style.overflowY = 'hidden';
main.style.touchAction = 'manipulation';
main.style.width = '100%';
main.style.marginLeft = 'auto';
main.style.marginRight = 'auto';
const header = this.el.nativeElement.previousSibling;
const footer = this.el.nativeElement.nextSibling;
if(header) {
//header
main.style.marginTop = (this.plt.is('ios') ? this.minHeight.ios : this.minHeight.md) + 'px';
} else {
//tab (temperatory)
main.style.marginTop = (this.plt.is('ios') ? this.minHeight.ios : this.minHeight.md) + 'px';
}
if(footer) {
main.style.paddingBottom = (this.plt.is('ios') ? this.minHeight.ios : this.minHeight.md) + 'px';
}
//reset scroll (should add some more functions)
window.scrollTo(0, 0);
break;
}
}
});
observer.observe(this.el.nativeElement.shadowRoot, {childList: true});
}
}
}