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

Question

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

在线复制

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

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

也许还有更多的情况，但是对我来说它们都不对，所以我相信我们在谈论的是Safari 9.X中的一个奇怪的错误。

该问题是由使用JavaScript库找到它的开发人员报告的。 （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 ）。

这是代码（ 和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中遇到了同样的问题。 我发现的是，在导航列表中以某种方式将某些内容标记为“选定”。 因此，我可以使用样式表中的:: 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);

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