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.
