Проблема с Safari Link Hover

Question

У меня проблема, которая возникает только в Safari - когда я наводил ссылку на ссылку в моем заголовке, ссылки справа от ссылки зависали над всем размером изменения (их вес шрифта, похоже, меньше) на протяжении анимации привязки ссылок, а затем, как только анимация закончится, ссылки вернутся к исходному размеру/весу. Очень странно то, что это влияет только на ссылки справа (ниже в коде) ссылки, которая зависает.

Вот картина:

Вы можете видеть на картинке, что ссылки справа от «историй игр» меньше ссылок слева от «историй игр» (игра история - это ссылка, которая витает на изображении). Это еще более заметно, когда это происходит, чем на изображении.

Вот мой код:

<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> 

Вот CSS участие:

/* 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); 
} 

Ссылки появляются отлично в Firefox, даже когда один завис над. Я только вижу эту проблему в Safari. Любая помощь будет принята с благодарностью!

Answer 1

Когда вы запускаете компоновку графического объекта (например, с помощью CSS-анимации), браузер отправляет этот элемент на GPU, но также и все, что будет отображаться поверх этого элемента, если его верхние/левые свойства были изменены. Сюда входит любая позиция: относительные элементы, которые появляются после анимационного.

Решение состоит в том, чтобы дать анимирующее положение элемента: относительный и z-индекс, который ставит его выше всего остального. Таким образом, вы получаете свою анимацию, но сохраняете (превосходный IMO) субпиксельный рендеринг шрифтов на несвязанных элементах.

Вот демо-проблемы и решения http://www.youtube.com/watch?v=9Woaz-cKPCE&hd=1

Update: Новые версии Chrome сохранить субпиксельное сглаживание на GPU скомбинированы элементы, пока элемент не имеет прозрачности, например, имеет опыт работы с не прозрачными или полу -прозрачные пиксели. Обратите внимание, что такие вещи, как border-radius, вводят полупрозрачные пиксели.

ОТ: Яффо торт

я не писал этот ответ