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

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)

2 Answers

Answers 1

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.

Answers 2

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!

If You Enjoyed This, Take 5 Seconds To Share It

• Facebook
• Twitter
• Google+
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati