Footer buttons/links become unresponsive on mobile Chrome (v67.0.3396.68 on Android)

Question

A few days ago I discovered that footer links can become unresponsive on Chrome on Android (on iOS this doesn't happen). After a few hours of testing I managed to create an example in which this problem can be reproduced.

The code

The code is very simple: the document consists of a long random text (Lorem Ipsum) and two footer buttons.

1. left button is placed in a footer <div> and is positioned by a negative bottom: -50px.
2. right button has a fixed positioning (bottom: 5px).

The problem affects both of the buttons.

To see the complete example, expand the following snippet:

var absCount = 0;
var fixedCount = 0;
$('#footer-button-abs').click(function() {
  $('#footer-button-abs').html("Abs Clicked " + (++absCount) + "x");
});
$('#footer-button-fixed').click(function() {
  $('#footer-button-fixed').html("Fixed Clicked " + (++fixedCount) + "x");
});

body {
  margin: 0;
}

.footer {
  display: block;
  position: fixed;
  bottom: 0;
  left: 0;
}


/* button placed within footer */
#footer-button-abs {
  position: absolute;
  top: -50px;
  left: 5px;
}


/* button with fixed positioning */
#footer-button-fixed {
  position: fixed;
  bottom: 5px;
  right: 5px;
}

/* making things pretty */
#footer-button-abs,
#footer-button-fixed {
  background: cyan;
  cursor: pointer;
  padding: 5px;
  font-size: 1em;
  line-height: 1.8;
  text-align: center;
  white-space: nowrap;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

h1,
p,
em,
ol {
  margin: 1rem;
}

h1 {
  font-size: 2em;
}

em {
  color: red;
  font-size: 1.2em;
  display: block;
  margin-bottom: 0;
  margin-right: 0;
}

ol {
  background: yellow;
  border: 1px solid black;
}

<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Provident officiis vel consequuntur laudantium dignissimos fugiat dicta, eum voluptate eligendi non, quam omnis ipsam delectus pariatur molestias maxime animi. Atque, earum?</p>
<p>Facilis cumque a pariatur repellat tempore odio optio quis iste neque libero ex et, quasi ipsam magni vero quae necessitatibus facere veritatis molestias quam consequatur, possimus deleniti! Esse, necessitatibus totam.</p>
<p>Temporibus asperiores assumenda maxime architecto ducimus natus reprehenderit, beatae accusamus iusto ipsam pariatur dolorem perspiciatis, fugiat at quas quibusdam consequatur. Neque adipisci aspernatur expedita qui id et, non laborum earum!</p>
<p>Aperiam possimus sint optio non harum doloribus nesciunt id enim ipsum repellendus repudiandae sed minus omnis deserunt sit mollitia ipsam vel eos aut, earum perspiciatis nostrum. Distinctio fugiat corporis vero.</p>
<p>Dignissimos provident sapiente perspiciatis, nisi repellat minima esse possimus! Officia at, iure dolor, veniam ut, error delectus aspernatur assumenda eos cum nemo. Sapiente atque voluptatem, rerum est amet vel accusantium.</p>
<p>Quaerat nihil optio sunt illo reiciendis obcaecati harum dolorem doloribus? Quasi ducimus maiores voluptate, quae ipsum harum repellendus consectetur dolor sit repellat hic quibusdam inventore facilis voluptas cupiditate dolores quaerat!</p>
<p>Dolores voluptas odio aperiam vero consectetur quae eius, deserunt rem quisquam, nihil veniam impedit inventore provident. Officiis consequuntur voluptatem vitae, non expedita itaque culpa possimus eveniet, qui placeat reprehenderit fugiat.</p>
<p>Id laboriosam tenetur necessitatibus eveniet architecto, dicta modi voluptate, adipisci autem minus quam sunt explicabo iure magni corrupti, neque ad est excepturi aliquid optio nulla illo dolores iusto nihil. Veniam.</p>
<p>Cumque hic quas quae voluptatum amet quis est temporibus eius, aliquid nisi porro facilis ab! Inventore, beatae asperiores molestias, fuga magni mollitia dignissimos necessitatibus distinctio maiores exercitationem nihil animi blanditiis!</p>
<p>In totam sunt esse quasi facilis corrupti dolorem nisi recusandae qui exercitationem, voluptate incidunt laborum labore dolor sint itaque accusamus id cumque atque ut illo voluptas beatae pariatur soluta! Ipsam.</p>
<p>Commodi sunt dolorum laudantium incidunt provident totam tenetur sequi, molestiae doloribus enim quia nisi iusto atque nihil. Eaque voluptates nihil, repudiandae omnis praesentium, harum expedita, ab nemo animi reiciendis reprehenderit.</p>
<p>Veritatis modi illum delectus, eum recusandae ab obcaecati distinctio suscipit nostrum? Voluptatem incidunt aut, reiciendis sunt tempore quisquam fugiat iste harum quaerat nostrum, alias ratione explicabo delectus assumenda sapiente cumque.</p>
<p>Asperiores dolore dolores perferendis amet molestiae repudiandae incidunt enim, architecto minima natus officiis eaque illo error exercitationem vitae ut quaerat blanditiis, accusantium corrupti consequuntur inventore. At, temporibus! Provident, harum
  quas?</p>
<p>Beatae, quas aut? Asperiores, provident? Soluta odit voluptatum harum molestiae, iste officiis earum quod tenetur placeat dicta ad labore vel quisquam sint eius tempore cum ipsum repellendus aperiam? Vero, iste!</p>
<p>Recusandae maiores possimus, tempore id doloribus similique magnam officiis ex et aspernatur inventore animi vel laboriosam cum quisquam ut tenetur dolorem nam. Assumenda temporibus id, necessitatibus pariatur ad voluptatum perferendis?</p>
<p>Commodi rem hic assumenda impedit, praesentium molestias aliquid voluptate, perferendis aspernatur, necessitatibus asperiores debitis placeat quibusdam. Tenetur debitis qui neque! Dignissimos ut dolorum possimus quibusdam quam qui aut. Iure, enim?</p>
<p>Exercitationem nostrum ea similique odio ullam impedit repellat consectetur cum ab id fugit, et cupiditate dolor provident! Perspiciatis distinctio, laboriosam dolorem animi odit consequuntur rerum aspernatur! Ducimus dolor est molestiae!</p>
<p>Dolorum cum repellat magni nostrum alias natus suscipit, nulla quia magnam odit earum at laborum quisquam labore in voluptas. Officia iure sapiente asperiores provident pariatur quae ratione corporis a unde.</p>
<p>Explicabo, impedit! Voluptatem, nulla. Minima natus sit autem molestiae doloribus, dolorem maiores harum eaque tenetur corporis, qui nam sequi adipisci, eveniet accusamus quo quasi magnam iure et voluptatem possimus culpa!</p>
<p>Ullam, tenetur eum minus magni veniam saepe fuga aliquam accusantium perferendis maxime rem error ea odit voluptatum voluptate vitae natus reprehenderit necessitatibus facilis. Vitae velit asperiores placeat architecto numquam iste?</p>
<p>Quaerat temporibus fuga maxime ea aperiam! Nihil ab eum nulla ea assumenda optio, natus qui ipsum impedit ipsam obcaecati odit beatae recusandae illo, pariatur sunt quas unde facere dicta eius.</p>
<p>Libero nam laborum reprehenderit dignissimos adipisci, enim facilis, officia consequuntur ea magni quo ab consequatur aperiam culpa fuga alias cum doloribus! Dolores quasi voluptate nam unde autem perspiciatis, soluta nulla!</p>
<p>Expedita iste quia odio illo, quas numquam in, doloremque rerum officiis optio ipsa quos at alias blanditiis debitis tenetur enim ipsam dolores amet quo quasi suscipit porro similique? Quam, odio!</p>
<p>Exercitationem repudiandae fugiat quod dolore nihil suscipit ipsam et, dolores quis dicta pariatur sit quia cumque ab consectetur illum labore nam molestiae, facilis magni itaque laboriosam perspiciatis. Repudiandae, quas sunt.</p>
<p>Quod, quasi excepturi ab recusandae dicta exercitationem reiciendis nobis optio? Voluptates perferendis placeat necessitatibus odit delectus repellendus voluptate nulla ab dolorum beatae quis architecto pariatur, mollitia dolorem explicabo exercitationem
  eaque.</p>
<p>Deserunt modi incidunt architecto distinctio. Et at provident, debitis voluptas reprehenderit quod dolores, fugiat dolore quas laboriosam id cum iure sit, odit necessitatibus distinctio recusandae molestias iste. Porro, praesentium magnam.</p>
<p>Ipsa exercitationem cum omnis sunt voluptas libero neque sed commodi voluptatibus sit dicta tempora maxime, eveniet hic adipisci, qui similique architecto facere doloribus numquam blanditiis fugiat. Iusto sint aliquid quisquam.</p>
<p>Aut quibusdam nisi doloribus tempore distinctio maiores adipisci magnam eum ex esse facere enim ipsa rerum, provident ipsam velit, voluptates voluptas! Omnis accusantium, iusto expedita eos vel magni nemo voluptatem?</p>
<!-- FOOTER BUTTONS - here's where the action hapens -->
<div class="footer">
  <button id="footer-button-abs">Abs Clicked 0x</button>
</div>
<button id="footer-button-fixed">Fixed Clicked 0x</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

You may play and try to fix the code at CodePen.

Reproducing the problem

Here's how to reproduce the problem (follow the procedure precisly). To help with testing, the example can be accessed on your phone as a raw gist.

1. load the example in Chrome on Android: click here
2. try pressing any of the footer buttons - the label will change
3. scroll till the very bottom of the page
4. again try pressing any of the footer buttons - the button label will NOT change
5. scroll up a bit, until the address bar becomes visible
6. again try pressing any of the footer buttons - the label will change

Alternative procedure

There's also an alternative procedure, which produces the same result:

1. load the example in Chrome on Android: click here
2. scroll till the very bottom of the page
3. scroll a bit up, until the address bar becomes visible
4. scroll down a bit, until the address bar is hidden
5. try pressing any of the footer buttons - the button label will NOT change
6. scroll a bit up, until the address bar becomes again visible
7. again try pressing any of the footer buttons - the label will change

Analysis

After some remote debugging I noticed that the area which receives the touch events gets detached from the element it belongs to (HTML button / link), as shown in the following image:

1. click / touch target area (event target)
2. button image

The button will respond if you press the part of the screen where the event target area is located (in picture shown by the arrow 2).

Conclusion

I think this is caused by viewport being resized. When the address bar is hidden the viewport expand, which in turn changes the location of the footer (in viewport coordinates). However the position of the click/touch target area is not adjusted accordingly.

To me this looks like a Chrome bug (i.e. on iOS and in Firefox this does not happen).

A workaround

The only reliable workaround I discovered is to prevent Chrome from hiding the address bar, which will in turn prevent viewport from being resized.

It can be implemented as described in the following StackOverflow article: Prevent Address-Bar hiding in mobile Browsers. I've tested the solution in the following CodePen and it works fine.

The only downside is that the page screen real estate is a bit smaller, since the address bar remains visible at all times.

Additional info

This identical issue is discussed in the following stack overflow pages:

• Position fixed on Chrome mobile causing issues when scrolling
• Android Chrome browser address bar shifts fixed element hitareas

Also there's a bug report posted at Chromium website: Browser address bar shifts fixed element bounding box