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

Question

I'm having some funny behavior with Safari 9 and a list of links with border.

Reproduction online

I isolated the problem as much as I could. It seems to get solved when:

• I remove the absolute position from #fp-nav ul li a
• Or whenever I use a bigger width in #fp-nav ul li a
• Or when I remove the style #fp-nav ul li:hover a span

And probably there are more cases, but nevertheless none of them make any sense to me, so I believe we are talking about a weird bug in Safari 9.X.

The problem was reported by a developer who found it using a javascript library. (fullPage.js)

Answer 1

I know I'm late to the discussion but I found this bug as well and what worked for me is just adding the following to the a link:

-webkit-transform: translateZ(0);

That fixed the issue for me. Don't know what the theory is behind it ;)

Answer 2

I had the same problem in Safari. What I figured out is, that somehow something is marked as "selected" within the navigation list. So I was able to create a work around using the ::selection selector in my style sheets. In your jsfiddle I made the following update in line 27

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

This worked for me. Maybe it's still useful for your work.

Answer 3

I do see the issue in Safari 9, however I believe it's just a matter of how you've coded the solution. I have taken your online solution and coded it properly and there is no bugs anymore.

Considering the animation of the elements only :

• If you can, I think it makes more sense to add the active class to the li elements. In your case it's easier because the width of the a and span is related to the li so you just need to scale its size for your animation,
• Only transition the properties that need to change. In your case it's the transform property,
• What you want is to increase the size of your element without affecting the other li. This is what the scale property is for in CSS,
• The order of your CSS is important (for the a tag it should be in this order visited, hover and active).

Here is the code (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>

Of course you need to include any vendor-prefixes needed (and probably some style for the :active and :visited states).

Let me know if you need any clarification!

UPDATED ANSWER BASED ON LATEST CODE PROVIDED

Here is the updated code based on the latest code provided. As you can see there is no bug.

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>

As you can see the code is clean, much shorter with less specificity and no !important. If you need to support IE8 and under or Opera mini then you can't use transform properties, otherwise it's best to use it as it doesn't repaint the DOM so it's better for performance. Don't forget to add vendor-prefixes.

Answer 4

You're right it's a bug with Safari 9.x.

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