/ / Keď sa spustí virtuálna klávesnica v systéme iOS Safari, spôsobí to, že prechody CSS blikajú. Ako to môže byť opravené? - html, ios, css3, mobilný safari, virtuálna klávesnica

Keď sa spustila virtuálna klávesnica v systéme iOS Safari, robí mi blikajúce prechody CSS. Ako to môže byť opravené? - html, ios, css3, mobilný safari, virtuálna klávesnica

V službe Safari pre mobilné zariadenia sa zdá, že webkit prechádza, zatiaľ čo virtuálna klávesnica je spustená (t.j. posúvaním nahor), spôsobuje blikanie, niekedy dokonca úplne preskočí animáciu.

Zdá sa, že dokonca bliká / trhať, aj keď som dal transition-delay na to.

Zvláštna vec je, že animácia je hladká na rozmazaniu (klávesové útvary).

Som schopný replikovať problém v JSFiddle tu: (otvorte ho v iOS)

JSFiddle je uvedený nižšie:

http://jsfiddle.net/5w0fj2rx/

Môžete vidieť, že zaostrenie / klepanie na vstupný prvok preskočí animáciu väčšinu času, Niekedy to funguje dobre.

Ktokoľvek vie o riešení? Vyzerá to ako niečo, čo by sa malo stretnúť už predtým, ale nemôžem nájsť žiadne informácie o nej.

odpovede:

2 pre odpoveď č. 1

Bol som schopný vidieť prechody tu.

Pridal som sa k vášmu prvku box.move.

#box.move {
-webkit-transform: translate3d(300px, 0, 0);
-webkit-backface-visibility: hidden;
}

Okrem toho ... Už používate jQuery, takže by som namiesto CSS použil animácie a prechody.

edit:

Urobil som nejaké dodatočné prekonanie s uvoľnením na vašom prechode a bol som schopný odstrániť akékoľvek skákanie / blikanie prechodu sa predtým. Tu je husle.

-webkit-transition: -webkit-transform cubic-bezier(0.32, 0, 0.68, 1) 500ms;

Jediná vec, ktorú môžem predpokladať, je dôvodtoto je rýchlosť snímok, pri ktorej je prehliadač schopný spracovať prechod. Takže znížením sumy, ktorú prvok presunie, môžeme odstrániť efekt blikania. To môže byť dôvodom, prečo je predvoleným prehliadačom videa pre otvorenie prehrávača videa. Nemyslím si, že mobilný safari prehliadač bol postavený pre pohyblivé prvky 300 pixelov v 500ms, hladko.