android - 页脚按钮/链接在移动 Chrome 上变得无响应（Android 上的 v67.0.3396.68）

问题描述

几天前，我发现页脚链接在 Android 上的 Chrome 上可能会变得无响应（在 iOS 上不会发生这种情况）。经过几个小时的测试，我设法创建了一个可以重现此问题的示例。

编码

代码非常简单：文档由一个长的随机文本（Lorem Ipsum）和两个页脚按钮组成。

左按钮放置在页脚<div>中，并由负号定位bottom: -50px。
右键有一个固定的位置（底部：5px）。

该问题影响两个按钮。

要查看完整示例，请展开以下代码段：

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>

您可以在CodePen上玩并尝试修复代码。

重现问题

这是重现问题的方法（严格按照程序进行）。为了帮助进行测试，可以在您的手机上以原始 gist的形式访问该示例。

在 Android 上的 Chrome 中加载示例：单击此处
尝试按任何页脚按钮 - 标签会改变
滚动到页面的最底部
再次尝试按下任何页脚按钮 - 按钮标签不会改变
向上滚动一点，直到地址栏变得可见
再次尝试按下任何页脚按钮 - 标签会改变

替代程序

还有一个替代过程，它产生相同的结果：

在 Android 上的 Chrome 中加载示例：单击此处
滚动到页面的最底部
向上滚动一点，直到地址栏变得可见
向下滚动一点，直到地址栏被隐藏
尝试按下任何页脚按钮 - 按钮标签不会改变
向上滚动一点，直到地址栏再次可见
再次尝试按下任何页脚按钮 - 标签会改变

分析

经过一些远程调试后，我注意到接收触摸事件的区域与其所属的元素（HTML按钮/链接）分离，如下图所示：

点击/触摸目标区域（事件目标）
按钮图像

如果您按下事件目标区域所在的屏幕部分，该按钮将响应（如图中箭头2所示）。

结论

我认为这是由调整视口大小引起的。当地址栏隐藏时，视口会展开，这反过来会改变页脚的位置（在视口坐标中）。但是点击/触摸目标区域的位置没有相应调整。

对我来说，这看起来像是一个 Chrome 错误（即在 iOS 和 Firefox 中这不会发生）。

一种解决方法

我发现的唯一可靠的解决方法是阻止 Chrome 隐藏地址栏，这反过来又会阻止调整视口的大小。

它可以按照以下 StackOverflow 文章中的描述实现：防止地址栏隐藏在移动浏览器中。我已经在以下CodePen中测试了该解决方案，并且效果很好。

唯一的缺点是页面屏幕空间有点小，因为地址栏始终可见。

附加信息

在以下堆栈溢出页面中讨论了这个相同的问题：

Chromium 网站上还发布了一个错误报告：浏览器地址栏移动固定元素边界框

标签： androidgoogle-chromemobilehyperlink