Safari saltando/saltando (¿error?) En el primer evento de "enfoque" de la carga de la página

Question

Actualmente estoy luchando contra un error muy frustrante en Safari, y no estoy seguro de a quién recurrir.

Parece más elementos (pero no todos, y no puede discernir el factor diferenciador) que activará un evento focus hará que todos los elementos de la página que se transicionaron o animado a saltar ~ 2px a la cima E izquierda. Y esto solo ocurre en el primer evento de enfoque después de que se carga la página.

Es un poco molesto ver el error, ya que está en la parte de inicio de sesión de droplr.com, y he sido completamente incapaz de encontrar un caso más simple en JSFiddle.

Si tiene/crear una cuenta y acceder al sistema, haga clic en este icono de edición para una caída:

Vas a ver que en el primer foco de la página, cosas fluctuación. Aquí está la línea de tiempo cuando hay una sola gota en la página y que desencadenan el foco en un elemento infractor:

Con más gotas, es sólo más de lo mismo, pero parece a un máximo de alrededor de 40 pinturas. Y el generador de perfiles no sugiere nada nefasto. Solo un viaje a través de jQuery internals.

Si en lugar de colocar elementos a través de un translate3d o matix3d, simplemente uso top y left, este error desaparece. Después de horas y horas de depurar esto, estoy en una pérdida completa.

Esperando que alguien haya visto algo similar, podría echar un vistazo, o podría darme consejos sobre la depuración de los próximos pasos.

Gracias tanto!

Actualización: de Dave Desandro suggested fue la aceleración 3d patadas en, así que probé con un translate lugar, y por supuesto, que no causó la fluctuación. No tengo idea de por qué la aceleración de hardware se estaría disparando con un evento focus, y solo una vez.

He intentado configurar una transformZ de 0 en la carga de la página para continuar y poner en marcha el hardware, pero tampoco tuve suerte. Cualquier otra idea es bienvenida.

Answer 1

He tenido esto que sucede al usar kits de fuentes personalizadas. ¿Podría ser éste el problema? Algunos eventos causan que las fuentes personalizadas vuelvan a dibujarse, lo que puede causar una ligera "fluctuación" en la visualización de la página.

A veces, la configuración manual de alturas y anchuras en todos los elementos HTML principales puede reducir el parpadeo.

Answer 2

Sé que esta pregunta se publicó hace un tiempo y esto es un poco de una posibilidad remota, pero aquí va:

Tal como punto de partida volver al cromo y mira el estratificación compuesto:

Pulse esto en la barra de dirección: sobre: ​​flags

Podrá habilitar los bordes compuestos desde allí.Los bordes rojos generalmente indican un problema de renderizado:

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

Lo que he encontrado de vez en cuando es que aunque hay problemas de representación en Chrome el navegador arregla bastante bien con ocultándolos de mí. En otros navegadores basados ​​en webkit, sin embargo, el resultado puede ser más notorio (es decir, Android).

También he visto parpadeo cuando se usan índices z junto con contenido que se está transformando.

De cualquier forma sería genial saber cómo resolvió este problema (si lo hizo). Publicar una respuesta a su propia pregunta, tal vez?

Answer 3

que he tenido este problema hace un tiempo y la verdad es que no recuerdo lo que era exactamente la causa pero aquí están algunos de los pasos que hemos seguido:

Compruebe que no tiene piel() y show() para el mismo elemento en la siguiente línea o viceversa. Ejemplo: el.show() el.hide()

fuentes personalizadas a cambio "Arial"

Para los elementos que no desee eventos de foco añadir este código en la parte inferior de las secuencias de comandos: noFocusElem.off('focus'); Esto se asegurará de eliminar cualquier controlador de enfoque que puedes haber agregado por error

por último colocar el CSS antes de cualquier script. Es un hecho de saber que la adición de reglas CSS después de un estilo en línea ha sido aplicada puede causar fluctuación especialmente si usted está utilizando la línea de hieght propiedad

Espero que esto ayude :)

Answer 4

una manera de evitar gastar tiempo la fijación de tiempo de carga twitches; puede configurar la página como oculta y luego hacer que los elementos sean visibles con la carga. Si la carga lenta de la página es lenta, es posible que desee tener un rotador por defecto para que sea visible, luego haga que la carga lo oculte. Luego, podría volver al tema cuando no tenga nada mejor que hacer.

Answer 5

Just my 2c worth.

Lo primero que me gustaría probar: Primero en cromo, whack en 'about: flags' (sí, sé que no estás usando Chrome). Encuentra los "bordes de la capa de renderizado compuesto" y enciéndelo. Una vez que esta función esté activada, obtendrá una idea aproximada de lo que se está procesando/hardware acelerado.

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

y buscar los problemas de representación. Estos son normalmente causados ​​por índices z. Juegue con cualquier z-index y oculte/muestre ciertos elementos hasta que se resuelvan los problemas de renderizado. Entonces trabaja desde allí. Los ataques y la opacidad de translate-z también pueden causar problemas.

Por experiencia he encontrado que los problemas de renderizado en otros navegadores webkit pueden diagnosticarse usando chrome. El parpadeo es una ocurrencia común en el navegador de Android.

En segundo lugar: echar un vistazo en el evento en sí enfoque y tratar de prevenir cosas como el comportamiento por defecto. Parece un tiro largo para mí, pero pruébalo.

Answer 6

No he probado esto, así que voy a ser muy sorprendido si funciona ... pero aquí está una idea:

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

Answer 7

He estado corriendo en el mismo tema recientemente y encontró algo que fija en mi caso

verificar si hay algo que se esconde fuera de la pantalla como:

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

la eliminación de cualquier instancia de éstos de la 3d elementos (incluidos los niños) se aceleró detuvo el salto contenido en el enfoque para mí.