La casella di controllo Android hack causa lo spostamento del sito su iPhone

Question

Sto usando il Advanced checkbox hack per nascondere e mostrare il mio menu reattivo. L'hack è necessario per consentire a Android < 4.1.2 di toccare effettivamente il commutatore - non funziona senza l'hack.

Ora si scopre che la parte di animazione dell'hack

body { 
    -webkit-animation: bugfix infinite 1s; 
} 
@-webkit-keyframes bugfix { 
    from {padding:0;} 
    to {padding:0;} 
} 

causa il movimento reale in almeno un iPhone. Come posso evitare che questo hack rovini l'esperienza del sito per gli utenti di iPhone?

Ho un'anteprima dal vivo con l'errore over here. Un film con l'errore visibile è visto here.

Answer 1

Si è scoperto che avevo una regola CSS regola * { transition: all .5s ease; } css da applicare a tutte le animazioni — tra cui questo hack. Questo ha causato l'errore.

Rimuovere questa regola e applicarne manualmente il contenuto a tutte le mie animazioni ha risolto il problema.

Answer 2

Non ho un Android per testarlo, ma non funzionerà anche se applicato solo a un elemento anziché all'intero corpo?

.toggle { 
    -webkit-animation: bugfix infinite 1s; 
} 

@-webkit-keyframes bugfix { 
    from { padding: 0; } 
    to { padding: 0; } 
} 

Finché non si ha alcuna imbottitura quell'elemento