Safari jittering/jumping (bug?) Al primo evento "focus" del caricamento della pagina

Question

Attualmente sto combattendo un bug molto frustrante su Safari, e non sono sicuro di dove girare.

Sembra più elementi (ma non tutti, e non riesco a discernere il fattore di differenziazione) che attiverà un evento focus causerà tutti gli elementi della pagina che sono transizione o animate a saltare ~ 2px verso l'alto e sinistra. E questo si verifica solo sul primo evento di messa a fuoco dopo il caricamento della pagina.

È un po 'fastidioso vedere il bug, dato che è nella porzione di login di droplr.com, e non sono stato completamente in grado di analizzare un caso più semplice su JSFiddle.

Se avete/creare un account e di log-in, cliccare su questa icona di modifica per una caduta:

Vedrai che il primo obiettivo della pagina, le cose jitter. Ecco la linea temporale quando c'è una sola goccia sulla pagina e mi attivano concentrarsi su un elemento incriminato:

Con altre gocce, è solo più dello stesso, ma sembra al massimo fuori circa 40 vernici. E il profiler non suggerisce nulla di nefasto. Solo un viaggio attraverso gli interni di jQuery.

Se invece di disporre gli elementi tramite translate3d o matix3d, utilizzare semplicemente top e left, questo errore scompare. Dopo ore e ore di debugging, sono completamente perso.

Sperando che qualcuno abbia visto qualcosa di simile, potrebbe dare un'occhiata, o potrebbe darmi consigli sul debug dei prossimi passi.

Grazie mille!

Aggiornamento: Dave Desandro suggested era l'accelerazione 3d calci in, così ho provato con un translate invece, e abbastanza sicuro, che non ha causato il jitter. Non ho idea del motivo per cui l'accelerazione hardware si accenderà con un evento focus e, solo una volta.

Ho provato a impostare un transformZ di 0 sul caricamento della pagina per andare avanti e accelerare l'hardware, ma senza fortuna, neanche. Altre idee sono benvenute.

Answer 1

Ho avuto questo problema quando si utilizzano kit di caratteri personalizzati. Potrebbe essere questo il problema? Alcuni eventi fanno sì che i caratteri personalizzati vengano ridisegnati, il che può causare un "tremolio" estremamente lieve nella visualizzazione della pagina.

A volte, l'impostazione manuale di altezze e larghezze su tutti gli elementi HTML padre può ridurre lo sfarfallio.

Answer 2

So che questa domanda è stata pubblicata qualche tempo fa e questo è un po 'un lungo tiro, ma qui va:

Forse come punto di partenza tornare a Chrome e cerca nella stratificazione composita:

Inseriscilo nella barra degli indirizzi: in merito a: flag

È possibile abilitare i bordi compositi dall'interno.I bordi rossi generalmente indicano un problema di rendering:

http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome

Quello che ho trovato di tanto in tanto è che anche se ci sono problemi di rendering in Chrome il browser affronta abbastanza bene con loro nascondendo da me. In altri browser basati su webkit, tuttavia, il risultato può essere più evidente (ad esempio Android).

Ho anche visto lo sfarfallio si verifica quando vengono utilizzati gli z-index in combinazione con il contenuto che viene trasformato.

In entrambi i casi sarebbe bello sapere come hai risolto questo problema (se l'hai fatto). Pubblica forse una risposta alla tua stessa domanda?

Answer 3

Ho avuto questo problema un po 'indietro e onestamente non mi ricordo cosa esattamente è stata la causa, ma qui sono alcuni dei passi che ho seguito:

Verificare che non si dispone di hide() e show() per lo stesso elemento nella riga successiva o viceversa. Esempio: el.show() el.hide()

font Modifica personalizzati a "Arial"

Per gli elementi che non si desidera aggiungere eventi di attivazione di questo codice nella parte inferiore della vostri script: noFocusElem.off('focus'); Questo farà in modo di rimuovere eventuali gestori di messa a fuoco che potreste aver aggiunto per errore

Infine inserire il vostro css prima di qualsiasi script. E 'un fatto sapere che l'aggiunta di regole CSS dopo uno stile in linea è stato applicato può causare jitter soprattutto se si sta utilizzando la linea-hieght proprietà

Spero che questo aiuti :)

Answer 4

Un modo per evitare di spendere tempo a risolvere il tempo di caricamento contrazioni; è possibile impostare la pagina nascosta e rendere visibili gli elementi con il caricamento. Se la tua pagina è lenta da caricare, potresti volere che una spaziatura di default sia visibile, quindi fare in modo di nasconderlo. Quindi potresti tornare al problema quando non hai niente di meglio da fare.

Answer 5

Solo il mio valore di 2c.

La prima cosa che vorrei provare: primo luogo in cromo, whack in 'about: flags' (sì, lo so che non stai utilizzando Chrome). Trova i "bordi del livello di rendering compositi" e attivali. Una volta attivata questa funzione, avrai un'idea approssimativa di ciò che viene reso/accelerato dall'hardware.

See: http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome

e cercare eventuali problemi di rendering. Questi sono normalmente causati da z-indexes. Gioca con qualsiasi Z-Index e nascondi/mostra determinati elementi fino a quando i problemi di rendering non vengono risolti. Quindi lavora da lì. anche gli hack e l'opacità di translate-z possono causare problemi.

Per esperienza, ho riscontrato che i problemi di rendering in altri browser Webkit possono essere diagnosticati tramite Chrome. Lo sfarfallio è un evento comune sul browser Android di serie.

In secondo luogo: dare un'occhiata all'evento focus stesso e provare cose come impedire il comportamento predefinito. Sembra un tentativo lungo ma provatelo.

Answer 6

non ho ancora testato questo, quindi sarò molto sorpreso se funziona ... Ma ecco un'idea:

$(document).ready(function() { 
    $(document).focus(function(e) { 
    e.preventDefault(); 
    }); 
    $(document).click(function() { 
     $(document).unbind(); 
    }); 
}); 

Answer 7

Ho corso lo stesso problema da poco e ha scoperto che qualcosa di fisso nel mio caso.

Verificare la presenza di tutto ciò che è nascosto fuori schermo come:

text-indent: -9999px; 
left: -9999px; 

Rimozione qualsiasi istanza di questi dal 3d elementi (compresi i bambini) ha accelerato fermato il contenuto Vai sul fuoco per me.