Bir öğeyi CSS3'te ölçeklemeye çalışıyorum. Bu eleman, animasyon yapıldığı zaman zıplayan çocuk elemanlarına sahiptir. Bu sadece Firefox'ta meydana geliyor. SO üzerinde bulunan birçok düzeltmeyi denedim, ancak bunların hiçbiri işi yapmıyor gibi görünüyor. CSS3 dönüşü ölçeği, Firefox'ta alt öğelerin atlanmasıyla sonuçlanır.
Benim HTML kurulumu:<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>
Üzerine giderek geçiş: komple bir kurulum gösterir bir jsfiddle oluşturduk
.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);
}
:
http://jsfiddle.net/kwhq2z4t/3/
Güncelleme
Windows 7 x64 üzerinde FireFox sürüm 32.0.1 kullanıyorum.
Biraz hareket ettirilen metin hakkında mı konuşuyorsunuz? –
Hayır, görüntü ve metin bir piksel hakkında yukarı ve aşağı hareket eder. –
Sadece metin benim için bir piksel atlıyor görünüyor –