Tengo un problema extraño. Cuando un usuario hace clic en un campo de entrada o selecciona el contenido de la página se mueve hacia la izquierda. No tengo ni idea de porqué. Esto ocurre solo en navegadores webkit.Comportamiento extraño después de hacer clic en los campos de entrada en Chrome y Safari
Esta página usa webkit-transform, ¿hay algo mal?
Puede probar aquí http://zapmama.be/home/dev#/ontour
espero que me puedan ayudar. ¡Muchas gracias!
Vicente
bien que tienen estos errores siguientes
Unsafe JavaScript attempt to access frame with URL http://www.zapmama.be/home/dev#/ontour from frame with URL http://www.youtube.com/embed/DSopUVEhG8Y. Domains, protocols and ports must match.
Unsafe JavaScript attempt to access frame with URL http://www.zapmama.be/home/dev#/ontour from frame with URL http://www.youtube.com/embed/mMhSIqE-pBA. Domains, protocols and ports must match.
y la razón del comportamiento weired es este mensaje de advertencia:
2event.layerX and event.layerY are broken and deprecated in WebKit. They will be removed from the engine in the near future.
encontrará más información sobre la solución de esta cuestión en here, here y here
Creo que ha usado Web Inspector/Chrome Developer Tools para inspeccionar esto. Estos mensajes no tienen nada que ver con el diseño roto (los layerX/layerY se refieren a la forma en que Web Inspector inspecciona los objetos 'Event'). –
He encontrado esto, con un comportamiento muy similar. Aunque el error se desencadena por el foco de entrada, el problema fue causado por un elemento completamente separado.
Abra la página donde se está produciendo, repliegue el problema y abra el inspector. Luego revise el hermano y otros componentes en la página, configurándolos para 'mostrar: ninguno'. Cuando el componente del problema está oculto, el problema lo solucionará. Ese componente es el que necesitas modificar.
En mi caso estaba usando un 'left: 50%' como parte del centrado, y lo cambié a un enfoque diferente.
En mi humilde opinión, debe evitar mezclar izquierda/arriba con translate3d.
Para reproducir, haga clic en SELECCIONAR, luego en cualquiera de las ENTRADAS. –
Ahora 'enmascaré' el comportamiento cambiando la posición con JS cada vez que esto sucede. Aún puedes verlo moverse un poco. – Vinzcent