2

我对 Safari 9 和一个带有边框的链接列表有一些有趣的行为。

在此处输入图像描述

在线复制

我尽可能地隔离了这个问题。在以下情况下似乎可以解决：

  • 我absolute从#fp-nav ul li a
  • 或者每当我使用更大width的#fp-nav ul li a
  • 或者当我删除样式时#fp-nav ul li:hover a span

可能还有更多的案例，但它们对我来说都没有任何意义，所以我相信我们正在谈论 Safari 9.X 中的一个奇怪的错误。

该问题是由使用 javascript 库发现它的开发人员报告的。(fullPage.js)

4

4 回答 4

2

没错，这是 Safari 9.x 的一个错误。

我在 windows、osx 和 linux 上进行了彻底的测试。到处都是一样的。

于 2016-04-04T12:07:24.143 回答
1

我知道我迟到了讨论，但我也发现了这个错误，对我有用的只是将以下内容添加到链接中：

-webkit-transform: translateZ(0);

这为我解决了这个问题。不知道背后的理论是什么；）

于 2016-10-04T06:42:15.220 回答
1

我在 Safari 中遇到了同样的问题。我发现，导航列表中以某种方式将某些内容标记为“已选择”。所以我能够在我的样式表中使用 ::selection 选择器创建一个解决方法。在您的 jsfiddle 中，我在第 27 行进行了以下更新

#fp-nav ul li a::selection{
    display: inline-block;
    position: absolute;
    width: 100%;
    cursor: pointer;
    text-decoration: none;
}

这对我有用。也许它对你的工作仍然有用。

于 2016-08-31T09:28:29.553 回答
1

我确实在 Safari 9 中看到了这个问题，但我相信这只是你如何编写解决方案的问题。我已经采用了您的在线解决方案并对其进行了正确编码，并且不再存在错误。

仅考虑元素的动画：

  • 如果可以的话，我认为将active类添加到li元素中更有意义。在你的情况下，它更容易，因为 和 的宽度a与你的动画span有关，li所以你只需要它的大小就可以了，scale
  • 仅转换需要更改的属性。在你的情况下，它是transform财产，
  • 您想要的是在不影响其他元素的情况下增加元素的大小li。这就是scale属性在 CSS 中的用途，
  • CSS 的顺序很重要（对于a标签来说，它应该是这个顺序visited,hover和active）。

这是代码（和 JSFiddle）：

body {
  background-color: #000;
}

#fp-nav {
  position: fixed;
  z-index: 100;
  height: 100vh; /* IE9+ */
  display: table; /* that will be used to center the li elements */
}

#fp-nav.right {
  right: 17px;
}

#fp-nav ul {
  margin: 0;
  padding: 0;
  /* center the li elements (vertical and horizontal) */
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

#fp-nav li {
  display: block;
  width: 8px;
  height: 8px;
  margin: 1em;
  border: 3px solid green;
  border-radius: 50%; /* 50% is enough to create a circle */
  background-color: #fff;
  overflow: hidden; /* To hide everything outside the li */
  transition: transform 0.3s; /* your transition for the size */
}

#fp-nav a {
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
  text-decoration: none;
}

#fp-nav li.active,
#fp-nav li:hover {
  transform: scale(1.4); /* the transformation */
}

#fp-nav span {
  /* To remove the text inside the span (better for accessibility) */
  text-indent: 100%;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
}
<div id="fp-nav" class="right">
  <ul>
    <li><a href="#"><span>Page1</span></a></li>
    <li class="active"><a href="#"><span>Page2</span></a></li>
    <li><a href="#"><span>Page3</span></a></li>
    <li><a href="#"><span>Page4</span></a></li>
  </ul>
</div>

当然，您需要包含任何所需的供应商前缀（可能还有一些用于:activeand:visited状态的样式）。

如果您需要任何澄清，请告诉我！

基于提供的最新代码的更新答案

这是基于提供的最新代码的更新代码。如您所见，没有错误。

body {
    background-color: #000;
}
#fp-nav {
    position: fixed;
    top: 20px;
    left:20px;
}
#fp-nav ul {
  margin: 0;
  padding: 0;
}
#fp-nav li {
    display: inline-block;
}
#fp-nav li + li {
  margin-left: -7px; /* it's the size of your border + 4px coming from the inline-block */
}
#fp-nav a {
    display: block;
    color: #fff;
    padding: .5em 1em;
    border: 3px solid red;
    text-decoration: none;
    background-color: black;
}
#fp-nav a:hover {
  transform: scale(1.2);
  transform-origin: top left;
}
#fp-nav a:visited,
#fp-nav a:active {
  outline: none;
}
<div id="fp-nav">
  <ul>
    <li><a href="#">Page 1</a></li>
    <li><a href="#">Page 2</a></li>
    <li><a href="#">Page 3</a></li>
    <li><a href="#">Page 4</a></li>
  </ul>
</div>

如您所见，代码很干净，更短，特异性更低，并且没有!important. 如果需要支持 IE8 及以下或 Opera mini 则不能使用转换属性，否则最好使用它，因为它不会重新绘制 DOM，因此性能更好。不要忘记添加供应商前缀。

于 2016-04-07T14:08:45.090 回答