链接到iOS中的伪元素双击问题

Question

我想在锚链接下方实现滚动线的效果，以见到客户摘要-我愚蠢地想象了一点CSS3可以很容易地实现这一点，而不会引起任何麻烦，因此我在下面的代码中做了一些设置，并且在过去的一个小时里，由于一个我不理解的非常烦人的错误，我把头撞在桌子上。

一切在台式机上都可以正常运行，但在移动设备（iOS和Android上）上，选择链接时都会遇到问题- 第一次单击，动画运行，并且我必须第二次单击才能触发链接 （与以下Codepen相同） ）。 这让我感到困惑，我想知道是否有人可以为我照亮任何东西！？

http://codepen.io/pablodancer/pen/ZLJVOP

 li { display: inline-block; list-style-type: none; } li a { text-decoration: none; position: relative; line-height: 1; height: auto; padding: 0; margin-right: 8px; padding-bottom: 8px; z-index: 1; } li a:after { display: block; left: 0; bottom: 0; margin-top: 4px; width: 0; height: 5px; background-color: blue; content: ""; z-index: -3; transition: width 0.3s; } li a:hover:after, li.active a:after { width: 100%; } 

 <ul> <li class="active"><a href="http:www.nme.com">nme</a></li> <li><a href="http:www.bbc,co.uk">bbc</a></li> <li><a href="">blah3</a></li> <li><a href="">blah4</a></li> <li><a href="">blah5</a></li> </ul> 

Answer 1

我相信双击问题仅与iOS有关。 我通常要做的是简单地将伪元素隐藏在触摸设备上，下面的两种方法都可以。

（1）使用CSS媒体查询，它适用于iOS 9+和Android 5+。

@media (hover: none) {
  li a:after {
    display: none;
  }
}

（2）使用一点Javascript + CSS：

(function(html) {
  html.className += ('ontouchstart' in window) ? ' touch ' : ' no-touch ';
})(document.documentElement);

---

.touch li a:after {
  display: none;
}

另外，如果您希望保留活动样式，则可以使用选择器li:not(.active) a:after 。 您可能还需要设置li {vertical-align: top;}以便项目可以很好地li {vertical-align: top;} 。

Answer 2

这是由WebKit在IOS上采用的非标准行为引起的。

奇怪（但很常见）的问题需要一个怪异（简单）的hack，这是我仅通过CSS和防弹浏览器支持解决的方法。

基本上，魔术使用的是transforms并且IOS / WebKit不会将伪元素视为隐藏元素，因此，当鼠标悬停显示时，它不会强制执行两次双击行为：

li a:after {
  /* keep the element 'visible' and with a size */
  display: block;
  content: '';
  width: 100%;
  height: 2px;
  ...
  /* then 'hide' it with a transform */
  transform: scaleX(0);
  ...
  /* add a nice transition */
  transition: transform 600ms ease;
}

li a:hover:after {
  /* 'show' the element by resetting the transform */
  transform: scaleX(1);
}

到现在为止，似乎可以解决问题，为什么？ 因为在页面的重排中不计算已转换元素的大小：）