Safari 9 中的错误？为链接的边框添加蓝色

Question

我在 Safari 9 和带边框的链接列表中遇到一些有趣的行为。

Reproduction online

我尽可能地隔离了问题。它似乎在以下时间得到解决：

我从 #fp-nav ul li a

absolute

或者每当我在 #fp-nav ul li a

width

或者当我删除样式时 #fp-nav ul li:hover a span

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

开发人员使用 javascript 库发现的问题 was reported。 (fullPage.js)

Answer 1

你说得对，这是 Safari 的一个错误 9.x。

I tested in on thoroughly on windows, osx and linux. It's the same everywhere.

Answer 2

我确实在 Safari 9 中看到了这个问题，但我相信这只是您如何编写解决方案的问题。我已经采用了您的在线解决方案并正确编码，现在没有错误了。

仅考虑元素的动画：

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

这是代码 (and the 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>

当然，您需要包括任何所需的供应商前缀（可能还有 :active 和 :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，因此性能更好。不要忘记添加供应商前缀。

Answer 3

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

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

这对我有用。也许对你的工作还是有用的。

Answer 4

我知道我讨论晚了，但我也发现了这个错误，对我有用的是将以下内容添加到 link:

-webkit-transform: translateZ(0);

这解决了我的问题。不知道背后的理论是什么;)

Safari 9 中的错误？为链接的边框添加蓝色

Bug in Safari 9? adding blue color to links' border

html

css

safari

webkit

safari9

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