Safari Link Hover Issue

Question

I'm having an issue that only occurs in Safari - when I hover over a link in my header, the links to the right of the link being hovered over all change size (their font weight appears to get smaller) for the duration of the link hover animation, and then once the animation is finished the links return to their original size/weight. The very strange thing is that it only affects the links to the right (below in the code) of the link that is hovered over.

Here is a picture:

You can see in the picture that the links to the right of 'game history' are smaller than the links to the left of 'game history' (game history is the link being hovered on in the image). It's even more noticeable when it is happening than it is in the image.

Here is my code:

<ul class="nav_links_list">
    <li>
        <div><a class="head_link-nukun head_link--nukun" href="index.php"><span>H</span>ome</a></div>
    </li>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <li>
        <div><a class="head_link-nukun head_link--nukun" href="user_choice.php">Make Picks</a></div>
    </li>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <li>
        <div><a class="head_link-nukun head_link--nukun" href="game_history_calendar.php">Game History</a></div>
    </li>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <li>
        <a class="head_link-nukun head_link--nukun" href="userchoice_history.php?username=<?php echo $_COOKIE['username']; ?>">My History</a>
    </li>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <li>
        <a class="head_link-nukun head_link--nukun" href="full_leaderboard.php">Full Leaderboard</a>
    </li>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <li>
        <a class="head_link-nukun head_link--nukun" href="account_settings.php">Account Settings</a>
    </li>
</ul>

Here is the CSS involved:

/* Header Nukun link styles */
.head_link-nukun {
outline: none;
text-decoration: none;
position: relative;
font-size: 10pt;
line-height: 1;
color: #9e9ba4;
display: inline-block;
}
.head_link--nukun {
/*color: #E3E8DC;*/
color:#EEEEEE;
/*font-weight: 900;*/
text-transform: uppercase;
overflow: hidden;
padding: 10px 0;
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
.head_link--nukun:hover {
color: #F51E0A;
}
.head_link--nukun::before,
.head_link--nukun::after {
content: '';
position: absolute;
width: 70%;
height: 2px;
background: #EEEEEE;
bottom: 0;
left: 15%;
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
-webkit-transition-timing-function: cubic-bezier(0.2,1,0.3,1);
transition-timing-function: cubic-bezier(0.2,1,0.3,1);
}
.head_link--nukun::after {
background: #00B4FF;
-webkit-transform: translate3d(-300%,0,0) scale3d(0,1,1);
transform: translate3d(-300%,0,0) scale3d(0,1,1);
}
.head_link--nukun:hover::before {
-webkit-transform: translate3d(300%,0,0) scale3d(0,1,1);
transform: translate3d(300%,0,0) scale3d(0,1,1);
}
.head_link--nukun:hover::after {
-webkit-transform: translate3d(0,0,0) scale3d(1,1,1);
transform: translate3d(0,0,0) scale3d(1,1,1);
}
.head_link--nukun span {
color: #00B4FF;
display: inline-block;
position: relative;
-webkit-transform: perspective(1000px) rotate3d(0,1,0,0deg);
transform: perspective(1000px) rotate3d(0,1,0,0deg);
-webkit-transition: -webkit-transform 0.5s, color 0.5s;
transition: transform 0.5s, color 0.5s;
-webkit-transition-timing-function: cubic-bezier(0.2,1,0.3,1);
transition-timing-function: cubic-bezier(0.2,1,0.3,1);
}
.head_link--nukun:hover span {
color: #EEEEEE;
-webkit-transform: perspective(1000px) rotate3d(0,1,0,180deg);
transform: perspective(1000px) rotate3d(0,1,0,180deg);
}

The links appear perfectly in Firefox even when one is hovered over. I'm only seeing this issue in Safari. Any help would be greatly appreciated!

Answer 1

When you trigger GPU compositing (eg, through CSS animation), the browser sends that element to the GPU, but also anything that would appear on top of that element if its top/left properties were changed. This includes any position:relative elements that appear after the animating one.

The solution is to give the animating element position:relative and a z-index that puts it above everything else. That way you get your animation but keep the (superior IMO) sub-pixel font rendering on unrelated elements.

Here's a demo of the problem and solution http://www.youtube.com/watch?v=9Woaz-cKPCE&hd=1

Update: Newer versions of Chrome retain sub-pixel antialiasing on GPU composited elements as long as the element has no transparency, eg has a background with no transparent or semi-transparent pixels. Note that things like border-radius introduce semi-transparent pixels.

FROM: Jaffa The Cake

I did not write this answer