CSS3 transform scale of div results in jumping child elements in Firefox

Question

I am trying to scale an element in CSS3. This element has child elements which jump around when the animation is done. This seems to occur only in Firefox. I've been trying a lot of fixes found here on SO, but none of them seem to do the job.

My HTML setup:

<div>
<ul>
  <li class="appcenter-menu-item focus">
    <a href="#/sp">
      <div class="icon"></div>
        <label>First item</label>
    </a>
  </li>
  <li class="appcenter-menu-item focus">
    <a href="#/pep">
      <div class="icon"></div>
      <label>Second item</label>
    </a>
  </li>
    <li class="appcenter-menu-item focus">
      <a href="#/hp">
        <div class="icon"></div>
        <label>Third Item</label>
      </a>
    </li>
</ul>
</div>

The transition on hover:

.focus {
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.focus:hover {
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    transform: scale(1.1);
}

I have created a jsfiddle which shows the complete setup:

http://jsfiddle.net/kwhq2z4t/3/

Update

I am Using FireFox version 32.0.1, on Windows 7 x64.

Answer 1

Just experienced this "jump-after-transition-finished" bug in firefox.

After some fiddling around, adding -moz-transform-style: preserve-3d; to the animated elements' parent container - adding it to the initial state (the unanimated state before transition has occured - so that'd be just the .focus class) - did the job for me.

Answer 2

The only thing I've managed to find to fix things like this is:

-webkit-backface-visibility: hidden;
-moz-backface-visibility:    hidden;
-ms-backface-visibility:     hidden;
backface-visibility:         hidden;

It doesn't seem to help out with text in Firefox and Safari during scaling though, jumpy text is the browser rendering the size.