Comportamento strano dopo aver fatto clic sui campi di input in Chrome e Safari

Question

Ho uno strano problema. Quando un utente fa clic su un campo di input o seleziona il contenuto della pagina si sposta a sinistra. Non ho idea del perché. Questo succede solo nei browser webkit.

Questa pagina utilizza la trasformazione del webkit, forse c'è qualcosa che non va?

È possibile verificare qui http://zapmama.be/home/dev#/ontour

Spero tu mi possa aiutare. Grazie mille!

Vincent

Answer 1

bene si hanno questi errori seguenti

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. 

e la ragione del comportamento weired è questo messaggio di avviso:

2event.layerX and event.layerY are broken and deprecated in WebKit. They will be removed from the engine in the near future. 

troverete informazioni sulla soluzione di questo problema in here, here e here

Answer 2

Ho riscontrato questo, con un comportamento molto simile. Anche se il bug viene attivato dal focus di input, il problema è stato causato da un elemento completamente separato.

Quindi aprire la pagina in cui si sta verificando, replicare il problema e quindi aprire l'ispettore. Quindi passa attraverso il fratello e gli altri componenti della pagina, impostandoli su "display: none". Quando il componente problema è nascosto, il problema risolverà se stesso. Quel componente è quello che devi modificare.

Nel mio caso stavo usando un 'left: 50%' come parte del centraggio e lo ho cambiato in un approccio diverso.

IMHO si dovrebbe evitare di mescolare left/top con translate3d.