Skala transformacji CSS3 elementu div powoduje przeskakiwanie elementów potomnych w przeglądarce Firefox - html, css, css3, firefox

Próbuję skalować element w CSS3. Ten element ma elementy potomne, które przeskakują podczas wykonywania animacji. Wydaje się, że występuje tylko w Firefoksie. Próbowałem wielu poprawek znalezionych tutaj na SO, ale żaden z nich nie wydaje się wykonywać tej pracy.

Moja konfiguracja HTML:

<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>

Przejście na zawis:

.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);
}

Stworzyłem jsfiddle, który pokazuje kompletną konfigurację:

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

Aktualizacja

Używam FireFox w wersji 32.0.1 na Windows 7 x64.

Odpowiedzi:

Właśnie doświadczyłem tego „zakończonego skokiem po przejściu” błędu w Firefoksie.

Po kilku zabawach, dodając -moz-transform-style: preserve-3d; do animowanego elementu „kontener macierzysty” - dodawanie go do stanu początkowego (stan nieożywiony przed wystąpieniem przejścia - tak, aby „był tylko .focus klasa) - wykonałem pracę za mnie.

Jedyne, co udało mi się znaleźć, by naprawić takie rzeczy, to:

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

Wydaje się, że nie pomaga to w tekstach w Firefoksie i Safari podczas skalowania, ale skokowy tekst to przeglądarka renderująca rozmiar.