My Stackoverflow: 
https://stackoverflow.com/questions/50938106/android-chrome-browser-address-bar-shifts-fixed-element-hitareas

Others with the same issue:
https://stackoverflow.com/questions/50914207/position-fixed-on-chrome-mobile-causing-issues-when-scrolling

https://stackoverflow.com/questions/50723672/footer-buttons-links-become-unresponsive-on-mobile-chrome-v67-0-3396-68-on-andr

Same thing happend. You can check this site kenh14.vn on android device, scroll until the end of site, there are 2 button cannot click.

Tested the issue in Android and able to reproduce the issue. 

Steps Followed:
1. Launched the Chrome Browser.
2. Navigate to the URL: pitchfork.com
3. Scroll down quickly (flick your finger)
4. Abruptly stop the scrolling by touching the screen
5. The bottom navigation buttons are no longer tappable. 

(or)

1. Launched the Chrome Browser.
2. Navigate to the URL: kenh14.vn
3. Scroll to the bottom of the page.
4. Observe that buttons in the bottom are not tappable.

Chrome versions tested:
67.0.3396.87(Stable), 69.0.3465.0(Canary)

OS:
Android 8.1.0

Android Devices:
Pixel 2

Please navigate to below link for log's and screen cast--
go/chrome-androidlogs/854408

Note: 
1. Leaving this issue as Untriaged as issue is not consistently reproduced and was not able to provide proper bisect. It can be observed in the screen cast provided in the above link.
2. Upon verifying in the previous builds, issue seems to be observed since M67 builds.

Thanks!

Until this issue is fixed the only reliable workaround is to prevent Chrome from hiding the address bar, which will in turn prevent viewport from being resized.

This can be implemented as described here: https://stackoverflow.com/questions/18061308/prevent-address-bar-hiding-in-mobile-browsers

I'm the author of one of the StackOverflow posts and I might just have found a workaround for this bug.

I'm testing this on a Pixel 2 running the latest Chrome, not sure how nice it will work for lower end devices. It's a bit ugly but it seems to work for me.

What I did was replace the offending element with itself (forcing a browser re-layout) on the 'touchend' event. This is perfect because the problem only exists on mobile and 'touchend' does not exist on desktop versions.

Working workaround (hopefully): https://codepen.io/rfgamaral/pen/WyzBay

This sounds like  issue 848122 

We've been receiving complaints of (with high probability) this issue on our website. Users can't tap buttons or target input fields, unless they figure out they have to tap below the actual element.

All occurances have been related to `position:fixed;` -containers.

Been pulling my hair out for weeks on this. Fixed bottom navigation hit area gets shifted by url bar coming into focus. Sometimes the issue persists even after url bar is hidden again.

http://pixagen.app

Here's an example

https://youtu.be/Mg2wHF3CchA

FYI, those that are experiencing this same issue, the issue is related to https://bugs.chromium.org/p/chromium/issues/detail?id=848122 which has been reported fixed and merged into an upcoming release.

I have been having this issue too while working on my website which directed me here after trying many ways to solve this.

Have been having this new chrome address bar issue (yes have been having all kinds of issues with chrome for android related to fixed items read below).

Issue:

1. Issue with non-interactive elements on address bar disappearing:

Currently, I was working on my website where issue was with my fixed menu in which after scrolling down the page (and the address bar goes up) the navigation buttons position will shift up as much as the height of the url bar. Same with another fixed go to top button in the very bottom.

2. Issue with viewport rendering and height and height of elements dependent  on them (and I think this is causing the issue):

When the address bar is visible the viewport height remains the total height of the screen (which means a 100vh or window height is only visible after the address bar hides) which is totally fine


a. but the issue here is that many things keep hidden in a 100% viewport dependent app where all navigations for the app are in the bottom of the screen and there are also touch gestures for swipe down and up, and you cannot scroll anymore to make them visible and will have to make sacrifice of a better ui just for the most used mobile browser.

b. But the bigger issue here still is that when making something fixed, top:0, bottom: 0 and the address bar goes up, the element doesn't fill the screen instead we can see the background from where the address bar was earlier.

I tried making it height 100% which still doesn't work and now it keeps the element unfilled from the bottom

On doing height 100vh it fills the screen now, but  issue 2 (a) is there now


Past Experience and issues:

1. Related to issue 1
 
I have experienced the same issue in past but it was a bit different that while loading the site if you scroll up the address bar completely before loading finishes then chrome will render the fixed elements in the right position but if you scroll the address bar back down fixed elements bounding rect or the interactive position of the element changes,

Vice versa; if you don't hide the url bar before loading and hide it after the page finishes loading now you cannot click the fixed elements in the right position after hiding the url bar but if you make it show again then fixed elements start working properly again.

2. Related to viewport heights

I have had this issue changed and made into a new one so many times that chrome for android keeps changing the height of the viewport, with 100vh and window.height their height keeps changing for the browser time and time, sometimes it's size of the screen, sometimes it toggles as the url bar hides and shows.
The worst of all is that, we don't know sometimes the 100vh from css differs from window.height property.



Best Solution?

It scratches my head so much (because i am ui developer and doing css and js for the ui most of the times), that I stop using position fixed things on the page to the top and don't use viewport heights at all, but what's the point of sacrificing all this just because of the url bar.

Instead why not just have an overlay url bar which hides and does not shift the content at all, like good old opera or safari ?

It will really help people create web apps with app like interfaces because chrome for android has the majority of users.

Forgot to mention

That the address bar switching also triggers window resize, for which I don't really get the point, like when did we resize anything? we just scrolled

But point or not, It is troublesome in some cases to trigger resize events on scroll up and down and causing unwanted processing (and sometimes rendering).

While I agree it doesn't make sense to trigger a resize event when the address bar shows/hides, I believe the technical reason for this is because as the address bar shows/hides it resizes the window height which in the browsers "eyes" is seen as a resize. One way around this on mobile devices is to target orientationchange rather than resize.

It's unfortunate the direction Chrome has taken with toggling the address bar. The intent is good (providing more real estate) however the execution has led to far more bugs and quirks for us developers to jump through. Sadly this really degrades the development experience - I wish Google would lead the way rather than following Apple on this.

I am definitely also having this issue.  I will be scrolling a mobile optimized page with a fixed footer.  Randomly, all of a sudden tapping the screen directly on elements doesn't work.  I have to tap below them, it's like everything has been invisibly shifted down by the height of the address bar.  

Re:#17, could you please check your chrome version? This should be fixed in M68. If you're still seeing an issue in 68 or newer, please file a new bug and we can investigate.