Sam Assoum Sam Assoum - 1 month ago 8
CSS Question

Negative text indent, translate on hover bug (firefox)

I'm experiencing a firefox specific bug with a simple menu I've built

It's a ul-list that has an on-hover effect for the list items, the list items have

transform:translateX(12px)
applied on hover, and the text links have a negative indent applied at all times, the combination of the two create a Firefox specific bug where part of the text disappears on hover during its animation, looks like its basically being hidden by its own padding because of the negative value.

Here is a JS Fiddle as well as the code, am I missing -moz- css?

https://jsfiddle.net/CultureInspired/9435v0vy/1/

<ul class="menu_desktop">
<li><a href="/">Home</a></li>
<li><a href="/">About</a></li>
<li><a href="/">Press</a></li>
<li><a href="/">Contact</a></li>
</ul>


CSS:

.menu_desktop {
list-style-type: none;
margin: 80px;
padding: 0;
}

.menu_desktop li {
background: #fff;
margin-bottom: 10px;
text-indent: -.8em;
text-transform: uppercase;
letter-spacing: 6px;
display: table;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}

.menu_desktop li:hover {
transform: translateX(12px);
}

.menu_desktop a {
color: #000;
height: 100%;
padding: 8px;
display: block;
text-decoration:none;
}

Answer

I've got the same issue with firefox 49.0.2, it seems like a bug.

You can solve this by using margin-left: 12px; instead of the transform you are currently using.

Here is the fix (works in firefox, chrome & ie):

body {
  background: lightgray;
}
.menu_desktop {
    list-style-type: none;
    margin: 80px;
    padding: 0;
}

.menu_desktop li {
    background: #fff;
    margin-bottom: 10px;
    text-indent: -.8em;
    text-transform: uppercase;
    letter-spacing: 6px;
    display: table;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}

.menu_desktop li:hover {
    margin-left: 12px;
}

.menu_desktop a {
    color: #000;
    height: 100%;
    padding: 8px;
    display: block;
    text-decoration:none;
}
<ul class="menu_desktop">
  <li><a href="/">Home</a></li>
  <li><a href="/">About</a></li>
  <li><a href="/">Press</a></li>
  <li><a href="/">Contact</a></li>
</ul>