Animazione CSS Bug in Firefox

Question

Ho un'animazione CSS su un sito Web per creare un effetto di passaggio del mouse su un pulsante.

In Chrome e IE si blocca ma in Firefox ho avuto un brutto problema.

alcuni pezzi bianchi ancora in piedi dopo il passaggio del mouse.

animazione CSS:

.Hotel:hover{ 
    animation-name: pulse; 
    animation-duration: 1s; 
} 


@-webkit-keyframes pulse { 
    from { 
    -webkit-transform: scale3d(1, 1, 1); 
    transform: scale3d(1, 1, 1); 
    } 

    50% { 
    -webkit-transform: scale3d(100.10, 10.10, 10.10); 
    transform: scale3d(100.10, 10.10, 10.10); 
    } 

    to { 
    -webkit-transform: scale3d(1, 1, 1); 
    transform: scale3d(1, 1, 1); 
    } 
} 

@keyframes pulse { 
    from { 
    -webkit-transform: scale3d(1, 1, 1); 
    transform: scale3d(1, 1, 1); 
    } 

    50% { 
    -webkit-transform: scale3d(1.80, 1.80, 1.80); 
    transform: scale3d(1.80, 1.80, 1.80); 
    } 

    to { 
    -webkit-transform: scale3d(1, 1, 1); 
    transform: scale3d(1, 1, 1); 
    } 
} 

Answer 1

tutto sembra bene potrebbe essere a causa di impostazioni di accelerazione hardware non essere in

Usa accelerazione hardware quando disponibile acceso.

Attualmente, i browser come Chrome, Firefox, Safari, IE9 + e l'ultima versione di Opera tutte nave con accelerazione hardware; lo usano solo quando hanno l'indicazione che un elemento DOM ne trarrebbe beneficio. Con i CSS, l'indicazione più forte è che una trasformazione 3D è applicata a un elemento. Poiché hai già fatto il tuo diverso dall'accelerazione hardware attivata nulla sembra causare il problema la sua multa nel mio browser.

In Chrome e Safari potremmo vedere un effetto sfarfallio quando si utilizzano trasformazioni o animazioni CSS. Le seguenti dichiarazioni possono essere utilizzate per risolvere il problema:

.className{ 
    -webkit-backface-visibility: hidden; 
    -moz-backface-visibility: hidden; 

    backface-visibility: hidden; 

    -webkit-perspective: 1000; 
    -moz-perspective: 1000; 
    perspective: 1000; 
    /* Other transform properties here */ 
} 

Un altro metodo che sembra funzionare bene in desktop WebKit-powered e browser mobili è translate3d:

.className{ 
    -webkit-transform: translate3d(0, 0, 0); 
    -moz-transform: translate3d(0, 0, 0); 
    transform: translate3d(0, 0, 0); 
    /* Other transform properties here */ 
} 

nativi applicazioni mobili anche fare buon uso della GPU del dispositivo - è per questo che sono noti per avere prestazioni leggermente migliori rispetto alle app Web. L'utilizzo dell'accelerazione hardware può essere particolarmente utile sui dispositivi mobili perché aiuta a ridurre il consumo di risorse sul dispositivo.