iOS Safari 双击按钮问题

Question

我正在使用 Meteor 创建移动应用程序，但 Safari Web 视图中的按钮出现问题。似乎在完全随机的时间和按钮上，我被迫点击某物两次才能点击注册。我对这些问题进行了很多研究，但所有答案都对我不起作用。

我的应用程序中几乎所有按钮/链接都使用 JavaScript 来实现其功能。我的 CSS 中没有使用任何

:hover

。

我找不到发生这种情况的任何模式或原因。这看起来完全是随机的。它让我的应用程序感觉反应迟钝且缓慢，因为您必须点击一半的内容两次才能注册。当我在桌面浏览器中使用该应用程序时，似乎没有发生这种情况。

有人遇到过这个问题或者知道解决方案吗？

Answer 1

点击时，您的按钮是否位于视口底部 44px 处？这可能是由 Safari 的敌意菜单栏引起的。

如果是这样，我能想到的唯一解决方案是将这些链接移到该区域之外。如果有人有更好的解决方案，我自己也会感兴趣。（到目前为止，我发现的解决方案都不起作用，包括内容的样式；

.parent {
  overflow-y: scroll;
  height: 100%;
  -webkit-overflow-scrolling: touch;
}

或者向底部定位的元素添加一些填充；

.bottom-positioned-element {
   padding-bottom: env(safe-area-inset-bottom);
}

Answer 2

我的页面上的链接遇到了这个问题，所以我应用了这个 SCSS / CSS 解决方案。您的设置是否有可能将悬停添加到某些链接的其他位置..？即使风格没有改变..？

a.close {
  background: #fc0;

  @media (hover: hover) {
    &:hover {
      background: #f00;
    }
  }
}

Answer 3

我遇到了由 lightSlider 引起的双击问题，因为它使用了 touchstart 和 touchmove，以某种方式触发了 iOS 中的错误。就像您的情况一样，没有悬停效果可能是罪魁祸首。经过彻底调查后，我可以用这段脚本解决我的问题（添加到正文的开头）：

<script type="module">document.addEventListener("touchstart", function(){});</script>

我无法真正说出它为什么起作用，但似乎添加 touchstart/touchmove 侦听器并删除它们（可能在某些情况下）导致了问题 - 就像它以某种方式没有删除侦听器并且以某种方式阻止了单击事件的发生。

有人应该向 webkit 报告这个错误。我找不到任何现有报告。