CODEWITHSUNDEEP
javascriptandroidhtmlcssreactjs
PolYarBear
PolYarBear

Reputation: 333

Site doesn't hide address bar when scroll down in mobile browsers on Android

I made simple React app by "create-react-app" function (using hash-router, if it will help), and deployed it on github-pages. But, unfortunately, non of my pages doesn't hide address bar in mobile browsers when scroll down. Height of pages of course is more then 100%. Similar problem was there: Force hide address bar in Chrome on Android , but there is no solution for me. This is not a hybrid app or something else, it's just a site. I don't need to hide address bar on load, just only when scrolling down, and pop up it when scrolling up. I think it's just normal behaviour for site by default, isn't? Maybe I need to add/delete something in my .html/.css/.jsx/.json files to make it workable (maybe I deleted something important for it, I don't know), but I can't find differences between my site and others sites, written on React or pure html/css/js stack. I also tried to find information here and in internet, spent about 2 hours on it. I'm desperate.

Have learned following questions here:

hide mobile browser address bar on chrome (android)

How to hide the toolbar in Chrome for Android tablets for a 100% high website

Hide address bar in android chrome browser with scroll down gesture

Hide scroll bar, but while still being able to scroll

How to hide a mobile browser's address bar?

Upvotes: 3

Views: 3356

Answers (1)

PolYarBear
PolYarBear

Reputation: 333

Found a cause. Hope it will help someone who did similar amusing mistake as I.

The point is that I embedded following code to avoid problem with background (it didn't cover whole area of page):

html, body, #root {
  width: 100%;
  height: 100%;}

It blocks growth of height, of course, despite visually content is more then 100%. And even if I remove #root out of this ruleset, it wouldn't help, although #root would be bigger than html and body.

Solution is to set min-sizes instead (in addition to removing #root, of course):

html, body {
  min-width: 100%;
  min-height: 100%;}

Sorry for disturbing, guys)

Upvotes: 4

Related Questions