Android Checkbox Hack verursacht Umzug Website auf dem iPhone

Question

Ich habe die Advanced checkbox hack verwendet, um zu verbergen und zeigen meine responsive Menü. Der Hack ist notwendig, um Android < 4.1.2 zu ermöglichen, tatsächlich auf den Toggle tippen - es funktioniert nicht ohne den Hack.

Jetzt stellt sich heraus, dass die Animation Teil des Hack

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

in mindestens einem iPhone tatsächlichen Bewegung verursacht. Wie verhindere ich, dass dieser Hack die Website-Erfahrung für iPhone-Nutzer ruiniert?

Ich habe eine Vorschau live mit dem Fehler over here. Ein Film mit dem Fehler sichtbar ist here gesehen.

Answer 1

Es stellte sich heraus, dass ich eine CSS-Regel * { transition: all .5s ease; } CSS-Regel für alle Animationen — einschließlich diesen Hack anzuwenden hatte. Dies verursachte den Fehler.

Durch das Entfernen dieser Regel und das manuelle Anwenden des Inhalts auf alle meine Animationen wurde das Problem behoben.

Answer 2

Ich habe kein Android, um dies zu testen, aber wird der Hack auch funktionieren, wenn nur auf ein Element anstelle des gesamten Körpers angewendet wird?

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

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

Solange Sie an diesem Element jede Polsterung nicht haben