2014-09-16 89 views
5

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.

+0

Biraz hareket ettirilen metin hakkında mı konuşuyorsunuz? –

+0

Hayır, görüntü ve metin bir piksel hakkında yukarı ve aşağı hareket eder. –

+0

Sadece metin benim için bir piksel atlıyor görünüyor –

cevap

0

böyle şeyleri düzeltmek için bulmak için idare ettik tek şey:

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

olsa ölçekleme sırasında Firefox ve Safari'de metin ile yardım görünmüyor, ürkek metin tarayıcı boyutu oluşturma.

+0

Bu yardımcı olmuyor. Ayrıca bunun hangi öğeye uygulanacağı belirtilmelidir. –

4

Bu "fire-after-geçiş-bitmiş" hatasını firefox'ta deneyimlediniz. Bazı animasyonlu elemanların üst kabına göre -moz-transform-style: preserve-3d; ekleyerek uğraşırsanız, sonra

- Benim için bir iş yaptı - başlangıç ​​durumuna eklemeden (- bu sadece .focus sınıf olurdu böylece geçişten önce unanimated devlet oluştu) .