Safari делает панель навигации для перехода при наведении элементов, это работает нормально в других браузерах

Я пытаюсь заставить эту панель навигации работать без этого "нервного" эффекта в Safari. Он хорошо работает во всех других браузерах. Проблема в том, что при наведении курсора на звенья планка прыгает вниз.

Вы можете проверить код здесь http://jsfiddle.net/kpady8hr/14/ 

<nav class="top-menu">
<div class="divider first"></div>             
    <a href="#" class="product">
        <span class="hover">Link1</span>
        <span class="link">Link1</span>
    </a>                   
<div class="divider"></div>              
    <a href="#" class="product">
        <span class="hover">Link2</span>
        <span class="link">Link2</span>
    </a>                    
<div class="divider"></div>         
    <a href="#" class="product">
        <span class="hover">Link3</span>
        <span class="link">Link3</span>
    </a>
<div class="divider last"></div>
</nav>

Есть предложения?

Заранее спасибо:)

1 2
html css3 safari css-transitions css-animations

1 ответ:

Вам нужно стилизовать ссылки с вертикальным выравниванием и компенсацией в разделителе. Например: 

.top-menu .divider.first {
  background-position: left center; /* change this */
}

.top-menu .product {
  display: inline-block;
  position: relative;
  height: 22px;
  overflow: hidden;
  cursor: pointer;
  font-size: 18px;
  font-weight: 500;
  vertical-align: bottom; /* add this */
}
2