Material-design-lite: Chrome address bar won't hide on scrolling down

[RichardLindhout]

On my Android device the address bar won't hide on scrolling down.

I think it has to do with main content, instead of pushing more height to the body tag itself there is more height in the main content.

Also the same issue in Angular Material (https://github.com/angular/material/issues/665)

[Garbee]

This is probably another side-effect of how we handle layout content. It is an absolutely positioned element so the content is contained within that for scrolling instead of scrolling the body.

Not sure what we can do about it without refactoring layout.

[surma]

Not sure what we can do about it without refactoring layout.

That’s what I’m concerned about as well. I’ll see if there’s any tricks out there. Otherwise we might need to push this to v2.

[RichardLindhout]

More information about this issue: https://github.com/Polymer/core-header-panel/issues/15

[surma]

Well, that basically confirms that a refactor is the only way to fix is (at least for now).

[rikkertkoppes]

With some simple css adjustments I was able to circumvent the problem. I am sure it does not cover all cases, nor has it been extensively tested on all browsers, but it may be a start for those wanting to fix it:

.mdl-layout {
    overflow: visible;
}
.mdl-layout__drawer {
    position: fixed;
}
.mdl-layout__content {
    display: block;
    overflow: visible;
    margin-top: 64px;
}
.is-small-screen .mdl-layout__content {
    margin-top: 56px;
}
.mdl-layout__header {
    position: fixed;
}
.mdl-layout__obfuscator {
    position: fixed;
}

[surma]

@rikkertkoppes Thanks for your work. I’ll take at that soonish, but I’m afraid the changes to overflow will have unintended sideeffects with sticky headers and similar, but I’ll pin-point issues, once I get around to test this :)

[chrisbianca]

@surma What are the timelines on V2?

This really does impact on the usability of sites on mobile devices when you're losing such a large amount of real estate to the persistent address bar and footer. Not to mention the usability issues with not being able to tap to scroll to the top of the page.

[surma]

@rikkertkoppes Sorry for the long silence on this, other things had to take precedence. Sadly, we can’t use your suggested patch before v2, as it is a BC break and for v2 we have a complete rewrite planned anyways.

@chrisbianca We are aiming for v2 to be released in Q1 2016. That’s neither a promise nor a hard deadline, though.

[hughred22]

Awww... Just realize this problem as well after pushing it to mobile. Hit my fact to the wall as Client really demand this.

+1 for a fix.

[tobalr]

+1 for a fix!

[davidlevy]

+1 for a fix ! @rikkertkoppes ' solution seems to be a good start at least !!

[kylewiedman]

+1 for a fix! @rikkertkoppes solution worked ok for me, except in my case also needed:

html, body {
  overflow-y: auto;
  min-height: 100%;
}

mdl-layout {
  min-height: 100%;
}

Otherwise scrolling would stop after the URL was hidden on some Android devices. LG Nexus 5&6 specifically. I was using a sticky drawer but not a sticky header.

[Tecm0]

not sure how to fix this problem on app-drawer-layout

[Garbee]

This is going to be fixed naturally in our V2 layout work. Since nothing can be done for V1, closing this issue out to keep the issue tracker cleaner.

[uudruid74]

Silly to keep telling us that nothing can be done. There were minimal changes to my site required to make the solution proposed by @rikkertkoppes work, such as attaching the background so it wouldn't scroll. Some of the changes made things cleaner such I can now look for window scrolling rather than main scrolling. I had to add a tiny bit of code to shrink the header since the whatever code used to handle this no longer worked, but as I was already looking at scrolling events (to auto-click a "load more" button hidden below the fold and load more content) this was really trivial. You just add/remove a class (remember to add a transition-duration to the header). And since my header was partially transparent, I can now see the content scroll under it just as I originally planned.

This is just like when people said that clicking a drawer entry couldn't open a tab ... you just click the tab with a single jQuery line! It's easy! I find it funny that website lists all these sites that supposedly use the library. Test them ... they all scroll the address bar away on mobile! How is it that all the example sites supposedly built with the library work, when the library can't be fixed? And what ever happened to the "Mobile First" philosophy? Like telling us the app-drawer can't be shown and hidden with a gesture (hint: clicking the drawer with jQuery will show it, clicking the obfuscator with jQuery will hide it ... now attach your events).

[Garbee]

@uudruid74 What is your recommendation to solve the scrolling problem in a way that doesn't break existing developers expectations using MDL v1?

[rikkertkoppes]

Add a switch class to mdl-layout.

Maybe mdl-layout--responsive-address

In addition to applying some css rules you could also use the class, or an extra -js- variant to trigger js behaviour that may shuffle the elements in case that is needed for it to properly work in all cases.

For example the overflow on html and body mentioned by @kylewiedman coeld be applied by js.

[philipjmurphy]

Side note: Just discovered that the URL address bar will not hide on Chrome browsers when scrolling down if your HTTP connection is insecure (possibly due to mixed content over the wire or an invalid SSL certificate). I guess that this is a security precaution to keep the user informed that their connection is not secure. This is not related to the fix above, but just to be aware in case you think that the fix is not working.

[lovespy]

To avoid the address bar on mobile chrome wont hide on scroll down:

1) dont body display flex - make a body child div container with display flex
2) dont make body height 100% > div height 100% -- should be body height 100% > div without height 100%
3) body height 100% > div without height 100% > div height 100% -- the last div will show vertical scrollbar on load

[0xc0d3r]

To avoid the address bar on mobile chrome wont hide on scroll down:

1. dont body display flex - make a body child div container with display flex
2. dont make body height 100% > div height 100% -- should be body height 100% > div without height 100%
3. body height 100% > div without height 100% > div height 100% -- the last div will show vertical scrollbar on load

Can you explain it clearly?