Safari jittering/jumping (Bug?) Beim ersten "Fokus" -Ereignis beim Laden der Seite

Question

Ich kämpfe gerade einen sehr frustrierenden Bug auf Safari, und ich bin mir nicht sicher, wo ich sonst noch drehen sollte.

Es scheint meist Elemente (aber nicht alle, und ich kann den Differenzierungsfaktor nicht erkennen), die ein focus Ereignis auslösen wird alle Elemente auf der Seite verursachen, die transitioned oder animieren ~ 2px nach oben zu springen und links. Und dies tritt nur beim ersten Fokusereignis nach dem Laden der Seite auf.

Es ist ein wenig nervig, den Fehler zu sehen, da es im eingeloggten Teil von droplr.com ist, und ich konnte einen einfacheren Fall auf JSFiddle vollständig nicht destillieren.

Wenn Sie/ein Konto erstellen und log-in, klicken Sie auf dieses Symbol Bearbeiten für einen Tropfen:

Sie, dass auf dem ersten Schwerpunkt der Seite sehen werden, was Jitter. Hier ist die Zeitleiste, wenn es gibt einen einzigen Tropfen auf der Seite und ich auslösen Fokus auf eine problematische Element:

Mit mehr Tropfen, es ist nur mehr von der gleichen, aber es scheint zu max aus rund 40 Farben. Und der Profiler schlägt nichts ruchloses vor. Nur eine Reise durch jQuery Internals.

Wenn statt Elemente über eine translate3d oder matix3d, ich einfach top und left lege, verschwindet dieser Fehler. Nach stundenlangem Debuggen bin ich völlig am Ende.

Ich hoffe, jemand hat etwas Ähnliches gesehen, könnte einen Blick darauf werfen, oder könnte mir Ratschläge zum Debuggen der nächsten Schritte geben.

Thanks so much!

Update: Dave Desandro suggested es war die 3D-Beschleunigung treten in, so dass ich versuchte es mit einem translate statt, und sicher genug, die nicht den Jitter verursacht haben. Ich habe keine Ahnung, warum die Hardwarebeschleunigung mit einem focus Ereignis, und nur einmal auslösen würde.

Ich habe versucht, eine TransformationZ von 0 auf Seite laden, um voran zu gehen und die Hardware hochfahren, aber kein Glück, entweder. Weitere Ideen sind willkommen.

Answer 1

Ich habe das bei der Verwendung von benutzerdefinierten Schriftarten-Kits passiert. Könnte das das Problem sein? Einige Ereignisse führen dazu, dass benutzerdefinierte Schriftarten neu gezeichnet werden. Dies kann zu einem leichten "Jitter" in der Seitenanzeige führen.

Manchmal kann die manuelle Einstellung von Höhen und Breiten für alle übergeordneten HTML-Elemente das Flimmern verringern.

Answer 2

Ich weiß, diese Frage vor einer Weile geschrieben wurde, und das ist ein bisschen wie ein langer Schuß, aber hier geht:

Vielleicht als Ausgangspunkt, um Chrom zurück und Blick auf die Verbundschichtung:

Hit diese in die Adressleiste: über: flags

Sie können Composite-Grenzen von dort aus aktivieren.Die roten Grenzen weisen in der Regel eine Rendering-Ausgabe:

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

Was ich von Zeit zu Zeit gefunden habe, ist, dass, obwohl es Rendering-Probleme in Chrome der Browser ziemlich gut meistert sie von mir mit versteckt. In anderen Webkit-basierten Browsern kann das Ergebnis jedoch bemerkenswerter sein (d. H. Android).

Ich habe auch Flimmern auftreten sehen, wenn Z-Indizes in Verbindung mit Inhalten, die gerade transformiert werden.

In jedem Fall wäre es großartig zu wissen, wie Sie dieses Problem gelöst haben (falls Sie es getan haben). Post eine Antwort auf Ihre eigene Frage vielleicht?

Answer 3

Ich habe dieses Problem hatte eine Weile zurück, und ehrlich gesagt weiß ich nicht, was genau die Ursache war hier aber einige der Schritte, die ich gefolgt:

Sie sicher, dass Sie nicht verstecken haben() und show() für das gleiche Element in der nächsten Zeile oder umgekehrt. Beispiel: el.show() el.hide()

ändern Benutzerdefinierte Schriftarten „Arial“

Für die Elemente, die Sie Fokus-Ereignisse nicht an der Unterseite des Skripts fügen Sie diesen Code wollen: noFocusElem.off('focus'); Dies wird sicherstellen, dass alle Fokus-Handler entfernen Sie versehentlich hinzugefügt haben könnte

Schließlich Ihre css vor allen Skripts platzieren. Es ist ein Know Tatsache, dass nach einem Inline-Stil CSS-Regeln hinzufügen Jitter verursachen angewendet wurde, kann vor allem wenn Sie mit Line-hieght Eigenschaft

this helps :)

Answer 4

Eine Möglichkeit, die Ausgaben Zeit zur Festsetzung der Ladezeit zu vermeiden zuckt; Sie können die Seite auf "Versteckt" setzen und dann Elemente mit der Last sichtbar machen. Wenn Ihre Seite langsam geladen wird, sollten Sie einen Spinner standardmäßig auf "sichtbar" setzen und anschließend load verbergen. Dann könntest du auf das Problem zurückkommen, wenn du nichts Besseres zu tun hast.

Answer 5

Nur meine 2c Wert.

Das erste, was ich versuchen würde: Zuerst in Chrom, Whack in 'about: flags' (ja, ich weiß, dass du mit Chrome nicht). Suchen Sie nach den Composite-Rendering-Layerrändern und schalten Sie sie ein. Sobald diese Funktion aktiviert ist, erhalten Sie eine ungefähre Vorstellung davon, was gerendert und hardwarebeschleunigt wird.

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

und suchen Sie alle Rendering-Probleme. Diese werden normalerweise von Z-Indizes verursacht. Spielen Sie mit beliebigen Z-Indizes herum und verstecken/zeigen Sie bestimmte Elemente an, bis die Darstellungsprobleme behoben sind. Dann arbeite von dort. Translate-z-Hacks und Opazität können ebenfalls Probleme verursachen.

Aus Erfahrung habe ich festgestellt, Rendering-Probleme in anderen Webkit-Browsern können mit Chrom diagnostiziert werden. Flickern ist eine häufige Erscheinung im Android-Browser.

Zweitens: Werfen Sie einen Blick auf das Fokusereignis selbst und versuchen Sie Dinge wie das Verhindern des Standardverhaltens. Scheint wie eine lange Chance für mich, aber versuchen Sie es.

Answer 6

ich nicht getestet haben, so dass ich sehr überrascht, wenn es funktioniert ... aber hier ist eine Idee:

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

Answer 7

ich in das gleiche Problem habe und etwas gefunden kürzlich ausführten, die behoben in meinem Fall.

prüfen alles, was wie versteckt außerhalb des Bildschirms ist:

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

jede Instanz dieser aus dem 3D Entfernen beschleunigte Elemente (einschließlich Kinder) hielt für mich den Inhalt Sprung auf Fokus.