Question

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

Reproduction online

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

我从absolute

#fp-nav ul li a

或者，只要我在width

#fp-nav ul li a

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

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

使用javascript库找到它的开发人员遇到的问题was reported。（fullPage.js）

Answer 1

你是对的，它是Safari 9.x的一个错误。

我在Windows，osx和linux上彻底测试过。它到处都是一样的。

Answer 2

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

仅考虑元素的动画：

如果可以，我认为将active类添加到li元素更有意义。在您的情况下，它更容易，因为a和span的宽度与li相关，因此您只需要scale它的动画大小，
仅转换需要更改的属性。在您的情况下，它是transform属性，
您想要的是增加元素的大小而不影响其他li。这是CSS中的scale属性，
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中遇到了同样的问题。我想到的是，某种东西被标记为＆＃34;选择＆＃34;在导航列表中。所以我能够在我的样式表中创建一个使用:: selection选择器的工作。在你的jsfiddle中，我在第27行进行了以下更新

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

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

Answer 4

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

-webkit-transform: translateZ(0);

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

Safari 9中的错误？为链接添加蓝色＆＃39;边界

4 个答案:

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