Android: Webview positioned partially offscreen

[qrkz]

The fixed bottom navigation bar on webpages stay hidden until the user scrolls down the page and the address-bar of the browser hides.

The issue is that the browser doesn't take into account the height of addressbar while calculating the height of viewport(vh). Almost all other mobile browsers subtract the addressbar height from the viewport height.

[shahsurajk]

Any particular website to test this scenario?

[cd1063]

I have tried on several websites and not getting the same results. I'll try a few more more social and encrypted sites tonight and see if I get any different results.

[subsymbolic]

Thanks for your input and for seeking examples. A solid breaking example will help us triage and prioritize this. If an important site that many of our users need is breaking, we would bump the priority.

[qrkz]

Any particular website to test this scenario?

You can try qrkz.github.io.
What to look for:
When the page initially loads, you can only see a part of the fixed bottom navbar.
When the user scrolls the page only then is the navbar visible...

you can even try out any website which has a fixed bottom navigation bar.

[qrkz]

Thanks for yous input and for seeking examples. A solid breaking example will help us triage and prioritize this. If an important site that many of our users need is breaking, we would bump the priority.

We can see the bug by opening the PWA version of Pinterest or m.youtube.com and see how the bottom navbar isn't easily accessible... Bottom navbar in pinterest is almost inaccessible...

[CDRussell]

I had a quick look at this today, and the issue is that the web view can actually off be positioned partially offscreen depending on the scrolling. When you scroll the page, the toolbar slides up, as does the web view. So only when the toolbar is fully up off screen is the web view fully positioned onscreen.

It seems to be a combo of the scroll behaviour + CoordinatorLayout that is causing the issue. I found some potential hacky solutions but none that looked particularly great and I don't have time to investigate this much further right now.

Reddit.com is another good site to replicate, btw. The "use our app" banner that appears on first visit should be fully visible, but is instead partially offscreen.

I've added the help wanted tag; if any external contributor wants to investigate a fix for this, that's probably the quickest way it'll get resolved (and would be greatly appreciated!).

[Poopooracoocoo]

Related: #689

[RichyRich7-crypto]

Try implementing floating keyboard.

[Slion]

You can also reproduce on http://bbc.co.uk/news the accept cookies dialog is cut if the address bar is showing.

[raboof]

Another simple reproducer is https://arnout.engelen.eu/fullpage.html

[cmonfortep]

We will close this one as duplicate in favor of https://github.com/duckduckgo/Android/issues/914

[Poopooracoocoo]

i don't get why you'd close this issue as it's older but ok

[cmonfortep]

@Poopooracoocoo yes, we know it's older and had more activity than the other.
We wanted to give this problem more visibility and make it easier for any external contributors to send a PR.

https://github.com/duckduckgo/Android/issues/914 has a pretty good description, it will appear on our first page of issues, and we summarized what we posted here in a comment there so newcomers can skim the info quickly. Both are linked, so no info is lost.

But agree with you, our preference is to keep the original issue open.

[garygreen]

We too are experiencing this problem in app. It was brought to our attention by one of our users who was using DuckDuckGo android browser and we've told them to just use Chrome at this point.

Really wish this would get more priority in being fixed because it gives the impression of a broken website.

Also closing this in favour of #914 doesn't seem ideal - that issue looks to be related to something else, more to do with scrolling. It's also a more complex example and doesn't help encourage contributors, as compared to the more simpler examples on this issue (youtube, bbc news, simple reproduceable examples, etc)

[emibcn]

I have same problem with fullscreen MaterialUI dialogs. You can see an example at:

• https://emibcn.github.io/covid/#/#about

Bottom-right Close button (possibly translated) is seen in all tested mobile browsers but DuckDuckGo.