Does not hide android-chrome address bar when scrolling

[pfn]

A core-toolbar inside of core-header-panel is pinned to the top of the page when scrolling, but the address bar doesn't auto-hide. the polymer-project website works, but they appear to use their own custom components. core-scroll-header-panel also exhibits this same issue.

[devmikko]

I got the same issue, as well as using core-drawer-panel.

[davenotik]

I'd love to see this resolved. It makes a big difference. This is affecting pretty much any mobile browser: Safari, Chrome, etc.

I opened an SO post w/ actual screenshots: http://stackoverflow.com/questions/26615472/mobile-browser-chrome-doesnt-go-away-when-scrolling-using-polymers-core-header

[frankiefu]

Mobile Safari and Chrome on Android detect document scroll to auto show/hide browser's address bar. This means the document body is the scroll content and if you need a side drawer or a footer you will have to position them carefully so they are fixed on a specific position. core-header-panel is designed to use element scrolling so it doesn't have the restriction on where it is placed in the document and is much easier to layout along with other elements, like a drawer panel on the side. But it also means the browser's address bar is not going to be hidden automatically. There are some hacks to trick the browser to auto hide address bar or to go fullscreen but they are not very satisfying. I would also like to see a way to make it work but probably not with the current design of core-header-panel. It may mean we need to re-design or provide something different. (Same goes to core-scroll-header-panel)

[davenotik]

Thanks for the insights. I would posit that this is a "big deal" as it means a substantial chunk of screen real estate is unusable. This hurts the push for "web apps" with Polymer, especially when other web apps like Facebook, or even plain old websites, feel roomier. What can we out here do to help push this along? And besides the meta tags that force the browser chrome away (which itself has issues and isn't as ideal as the more intelligent auto hiding we speak of) is there a hack, something to get this working in this manner?

[nelcab]

For a while... maybe this could work out in some cases. It's not a fix, but at least an option:

https://developer.chrome.com/multidevice/android/installtohomescreen

When you install the WebApp to the homescreen, it disable the toolbar of the browser (at least in Chrome).

Hope Polymer team could fix this limitation.

[davenotik]

A tiny fraction of people install to home screen. You can force the web app to use minimal UI, but this is jarring as users are often confused as to how to bring back the navigation in my tests. Neither of these address the real problem: the core-toolbar implementation should not stop the browser from its natural behavior of sliding the navigation in and out of view with scrolling. This is how every other web app that's worth anything behaves. Polymer is supposed to be leading the charge with modern web apps, and so it seems this should be a priority. Screen real estate is one of the biggest differences between a native and web app and solving this issue would mitigate a glaring issue there. Pretty please!

[jannakha]

:+1: +1 to resolve this issue as soon as possible. Lots of real estate is lost due to the issue :-(

[ganadev]

+1

[Everlag]

:thumbsup: +1 Losing 1/6th of an already constrained display really hurts usability.

[wayou]

+1 pls~

[marcozanghi]

+1

[SayChunKim]

+1

[RichardLindhout]

+1

[JoeWells]

+1

[clintwood]

+1, Just hit this...

[Ajedi32]

So given that core-header-panel is deprecated, is the solution here to switch to paper-header-panel instead? Or does that element have the same problem?

[Everlag]

@Ajedi32, I've opened an issue on the paper-header-panel that references this element and a potential fix.

[kanodia]

Is URL bar hiding possible through polymer now?

[Ajedi32]

@kanodia Based on comment on the other issue referenced above, it sounds like app-layout should be able to handle this. (Though I haven't tested it myself.)

[kanodia]

@Ajedi32 Can you give a specific reference as in what exactly is the solution?

[Ajedi32]

@kanodia Sorry, no. I'm just repeating what @blasten said in the other issue:

We have a new experimental set of layout elements https://github.com/PolymerLabs/app-layout that aim to solve this issue. This experimental set of elements will be soon released as carbon elements along with new elements for routing and internationalization. Check it out!

[dirtslayer]

Last december i hit this and fixed it by switching to app layout. I decided to redo the project starting from 1.3 since the firebase deploy and probably other things had improved. Id like to see a major new release witg updated routing and layout. The current one does well until on a small device and in portrait im loosing what seems like a quarter of the screen