代码

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

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

问题会影响两个按钮。

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

＆＃13;

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");
});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

您可以在CodePen播放并尝试修复代码。

重现问题

以下是如何重现问题（请谨慎遵循程序）。为了帮助您进行测试，您可以在手机上以raw gist。

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

替代程序

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

在Android上的Chrome中加载示例：click here
滚动到页面的最底部
向上滚动，直到地址栏变为可见
向下滚动一下，直到隐藏地址栏
尝试按任何页脚按钮 - 按钮标签不会更改
向上滚动，直到地址栏再次可见
再次尝试按任何页脚按钮 - 标签将更改

分析

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

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

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

结论

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

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

解决方法

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

可以按照以下StackOverflow文章中所述实现：Prevent Address-Bar hiding in mobile Browsers。我已经在以下CodePen中测试了该解决方案，并且工作正常。

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

其他信息

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

还有一个错误报告发布在Chromium网站：Browser address bar shifts fixed element bounding box

页面按钮/链接在移动Chrome上无响应（Android版v67.0.3396.68）

代码

重现问题

替代程序

分析

结论

解决方法

其他信息

0 个答案: