I have a strange problem. When a user clicks on an input field or a select the content of the page moves to the left. I have no idea why. This happens only in webkit browsers.
This page uses webkit-transform, maybe there's something wrong?
You can test it here http://zapmama.be/home/dev#/ontour
I hope you can help me. Thanks a lot!
Vincent
well you have these following errors
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.
and the reason of the weired behavior is this warning message:
2event.layerX and event.layerY are broken and deprecated in WebKit. They will be removed from the engine in the near future.
you will find more about this issue's solution in here, here and here
I have encountered this, with very similar behaviour. Even though the bug gets triggered by input focus, the problem was caused by an entirely seperate element.
So open the page where it's occurring, replicate the issue, and then open the inspector. Then go through the sibling, and other components on the page, setting them to 'display: none'. When the problem component is hidden, the issue will fix it's self. That component is the one you need to alter.
In my case I was using a 'left: 50%' as a part of centering, and changed it to a different approach.
IMHO you should avoid mixing left/top with translate3d.
