Fixing that address bar issue in mobile browsers once and for all 🤬

image from freepik

Does your app require a fixed address bar in mobile browsers? Read mode intended to solve problem, creates a lot of problem for some use case. The sudden disappearing and appearing of the address bar as you scroll through mobile browser is pain in the ASS at times.

My use case was that I wanted a fixed address bar when my app was in certain state. It didn’t matter if the address bar was hidden or visible. But having a changing behaviour caused terrible problems with styling.

Here are some of the solutions I tried in progressive steps. If any of these works for your use case, you need not go to next step.

1. HTML5 fullScreen api.

This works but is not enough. Works great for android based phone but for iOS it doesn’t solve problem.

2. Always hide the address bar with window.scrollTo(0,1)

You’ve to scroll the entire body by code. And for some reason this didn’t work for me.

3. Always show the address bar with window.scrollTo(0,0)

This shit didn’t work too.

4. Use some css hack with html and body tag

Setting position as fixed for body is the trick.

html {
overflow: hidden;
width: 100%;
}
body {
height: 100%;
position: fixed;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}

Though my use case was quite complex, the overflow property in html and position property in body was added and removed dynamically.

Feel free to comment if you need any help.

I hope you found this article useful. I would love to hear your thoughts. 😇

Thanks for reading. 😊

Cheers! 😃

If you find this article useful, you can show your appreciation by clicking on the clap button. As the saying goes, ‘When we give cheerfully and accept gratefully, everyone is blessed’.