Safari vacille/saut (bug?) sur le premier "focus" de l'événement de chargement de la page

Question

Je suis actuellement à la lutte contre un très frustrant bug sur Safari, et je ne sais pas à qui s'adresser.

Il semble que la plupart des éléments (mais pas tous, et je ne peux pas discerner le facteur de différenciation) qui va déclencher focus événement sera la cause de tous les éléments de la page qui sont passés ou animées pour sauter ~2px en haut et à gauche. Et cela se produit uniquement sur le premier axe de l'événement après le chargement de la page.

C'est un peu gênant de voir le bug, c'est dans le consignés dans la partie de droplr.comet j'ai été totalement incapable d'en extraire un cas plus simple sur JSFiddle.

Si vous avez/créer un compte et connectez-vous, cliquez sur cette icône modifier pour un drop:

Vous verrez que sur le premier axe de la page, les choses de la gigue. Voici la timeline quand il y a une seule goutte sur la page et je déclencher l'accent sur un élément concerné:

Avec plus de gouttes, c'est juste plus de la même chose, mais il semble avoir un maximum autour de 40 peintures. Et le profiler ne pas proposer quelque chose d'abominable. Juste un voyage à travers jQuery internes.

Si, au lieu de la pose d'éléments via un translate3d ou matix3d,- je simplement utiliser top et left, ce bug s'en va. Après des heures et des heures de débogage, j'en suis à une perte complète.

En espérant que quelqu'un a vu quelque chose de semblable, pourrait prendre un coup d'oeil, ou pourrait me donner des conseils sur le débogage des prochaines étapes.

Merci beaucoup!

Mise à jour: Dave Desandro suggéré il a été l'accélération 3d de coups de pied, de sorte que je l'ai essayé avec un translate au lieu de cela, et bien sûr, qui ne causent pas de la gigue. Je n'ai aucune idée de la raison de l'accélération matérielle serait de tir avec un focus cas si, et seulement une fois.

J'ai essayé de fixer un transformZ de 0 au chargement de la page pour aller de l'avant et la montée en puissance du matériel, mais pas de chance, soit. Plus les idées sont les bienvenues.

Answer 1

J'ai eu ce problème un temps, et honnêtement, je ne me souviens pas exactement ce qui était la cause, mais voici quelques étapes que j'ai suivi:

Vérifiez que vous n'avez pas hide() et show() pour le même élément dans la ligne suivante, ou vice versa. Exemple: el.show() el.hide()

Changement de polices Personnalisées pour "Arial"

Pour les éléments que vous ne voulez pas les événements de focus ajouter ce code au bas de vos scripts: noFocusElem.off('focus'); Ce sera assurez-vous de retirer tout l'accent gestionnaires vous pourriez avoir ajouté par erreur

Enfin, placez votre css avant de tous les scripts. C'est un savoir fait que l'ajout de règles css après une ligne de style a été appliqué peut causer de la gigue surtout si vous utilisez la ligne hieght propriété

Espérons que cela aide :)

Answer 2

Un moyen d'éviter de passer du temps à corriger les temps de chargement des secousses; vous pouvez définir la page d'caché puis rendre les éléments visibles avec la charge. Si votre page est longue à charger, vous voudrez peut-être avoir un spinner défaut visible, puis ont la charge de les masquer. Ensuite, vous pouvez revenir à la question quand vous n'avez rien de mieux à faire.

Answer 3

Juste mon 2c vaut la peine.

La première chose que je voudrais essayer: D'abord dans chrome, whack dans "about:flags" (oui, je sais que vous ne l'utilisez pas Chrome). Trouver le "Composite calque de rendu des frontières" et l'activer. Une fois cette fonctionnalité activée, vous aurez une idée approximative de ce qui est en cours de rendu/accélération matérielle.

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

et de regarder pour tous les problèmes de rendu. Ces dernières sont généralement causées par des z-index. Jouer avec toutes les z-index et afficher/masquer certains éléments jusqu'à ce que le rendu problèmes sont résolus. Ensuite, travailler à partir de là. traduire-z hacks et l'opacité peut également causer des problèmes.

Par expérience j'ai constaté des problèmes de rendu dans d'autres navigateurs webkit peut être diagnostiquée à l'aide de chrome. Le scintillement est un phénomène fréquent sur le stock android navigateur.

Deuxièmement: regardez les focus de l'événement lui-même et essayer des choses comme empêchant le comportement par défaut. Semble comme un long shot pour moi, mais de lui donner un aller.

Answer 4

Je n'ai pas testé, donc je serai très surpris si il fonctionne... mais voici une idée:

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

Answer 5

J'ai été en cours d'exécution dans la même question récemment et a trouvé quelque chose qu'il fixe dans mon cas.

Vérifiez tout ce qui est caché à l'écran comme:

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

Suppression de toutes les instances de ces de la 3d accélérée des éléments (y compris les enfants) arrêté du contenu de sauter sur focus pour moi.