Search code examples
htmlcsssafari

Element are moving on hover only on Safari

I'm trying to resolve a mystery. On chrome everything is good but in Safari when I hoover some element (circled in red) they are moving a bit. enter image description here

This is only happening on the first hoover. The second time you do it nothing happens.

I tried to reproduce the situation here : 

<nav class="cd-secondary-nav">
  <ul class="has-magic-line">
    <li id="all-events" class="active"><a>Tous</a></li>
    <li id="week-events" class=""><a>Semaine</a></li>
    <li id="weekend-events" class=""><a>Week-end</a></li>
    <li id="recent-events" class="" style="position: relative;"><a>Nouveaux</a></li>
    <li class="magic-line" style="transform: translateX(103.844px) scaleX(73.75);"></li>
  </ul>
</nav>

https://jsfiddle.net/ykgjsfrh/1/ but it does work well even in Safari ...

Thank you for your help

Solution

  • Have you tried adding this to the li inside the nav in your css file:

    li {
  height: 100%;
  text-align: center;
  width: 100%;
}

    I wasn't able to fully test this with a fresh reload in the browser. It looked like the problem might have been that the size of each <li> was different after you hovered the links in Safari, but I can be wrong.