CSS3 transforms div scale, leads to jumping children in Firefox

Question

I am trying to scale an element in CSS3. This element has children that jump when the animation is complete. This is similar to Firefox. I tried to find many 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> 

Hover transition:

 .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 created jsfiddle that shows the full setup:

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

Update

I am using FireFox version 32.0.1 on Windows 7 x64.

Answer 1

Just experienced this "after transition after completion" error in firefox.

After some expansion, adding -moz-transform-style: preserve-3d; to the parent container of animated elements - adding it to its original state (implicit state before the transition occurred - so that would be just the .focus class) - did the job for me.

Answer 2

The only thing I managed to find was to fix things like this:

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

It doesn't seem to help with text in Firefox and Safari during scaling, but draggable text is a browser that displays size.