Clickable area of a fixed div is displaced relative to url bar scroll in mobile Chrome

Question

I have a clickable sticky div at the bottom of the screen. It's CSS is as:

 .bottomFixed {
      position: fixed;
      height: 300px;
      bottom: 0;
      background-color: #CDDC39;
    }

You may check it out at https://s3.ap-south-1.amazonaws.com/github-charan/chrom-bug/index.html

You may see the recording of the issue at https://s3.ap-south-1.amazonaws.com/github-charan/chrom-bug/chrom-click-area-bug.mov

Expected: Upon scrolling the page on mobile, I expect this div to remain sticky and entire div should remain clickable.

Actual: This div does remain sticky. However, its clickable region changes. It shifts to top or bottom. Here is a screenshot:

This displacement of the clickable region is related to the presence of url bar. It is evident from logging that it occurs when resize event of window stops getting fired.

Also, till now we have observed it only with Chrome 67, Android.

How to reproduce it?

I have created a sample html to explain the problem. You may access it at:

https://s3.ap-south-1.amazonaws.com/github-charan/chrom-bug/index.html

Open this url on mobile. In the initial state, both the bars are sticky to the bottom. and, clicking anywhere on the bar, toggles their colour.

Now, Play with the page. Then, suddenly, the second bar is no more aligned with the footer. It shifts up or down. At this point click on the edges of first bar, its top or bottom area stops responding to clicks.

How to Debug it?

1. Please connect your mobile using Remote Devices feature of Chrome Dev Tools.

2. Click on the above url on mobile.

3. Then, hover over the "bottomFixed" div in Elements Tab of Dev Tools.

4. Now play with the screen. As you scroll, new window size is logged on the screen. When you tap anywhere on this div, it will display a console log message. Also, the colour of the div will toggle.

5. Then, suddenly this logging stops, and hovered area shifts up or down. "topFixed" div does not remain sticky to the footer.

Now tap on the area outside the hovered region. It stops working!

Insights:

1. Displacement height is equal to url bar.

2. If in the initial paint, url bar was present i.e. when you land on the page directly, clickable region shifts up.

3. and, if in the initial paint, url bar was absent i.e when you landed via navigation, clickable region shifts down.

4. As window.resize does not get fired, pixel distance of the sticky div relative to the top does not change. However, the top itself is changed due to presence/absence of url bar.

5. If we change the css to make this div sticky wrt to the top rather than bottom, as in the "topFixed" div, then this div also shifts along with the clickable region.

Please help solving this issue. It is a major bug on production. One quick and ugly fix is to disable the url bar movement. Reference: Prevent Address-Bar hiding in mobile Browsers