Firefox input issues when scaling page

Question

I'm using transform: scale(0.666667); transform-origin: 25.7778% 0 0; css in order to fit pages to any kind of screen sizes on my project.After that i face to the following issues!When i double click to input emails appears other place

Answer 1

I'm not sure if you would want to use transform to create a responsive design. You can use %'s to scale your design to fit any screen. From my understanding transform is still in experimental stages and not fully prepared for a production environment. I think the problem is that the problem is that the origin of the drop down is inheriting the css and reapplying it.

https://developer.mozilla.org/en-US/docs/Web/CSS/transform

But for example if you wanted to modify the width of your inputs regardless of screen size you can use width:50%; for example and it will always be 50% of it's container. Now there is more to responsive design, breaks for screen sizes where you redefine your design, but hopefully this helps!

EDIT: For a demonstration of the transform properties you can visit http://css3please.com/ It uses real time css editing to demonstrate the changes while also having the appropriate code for various browsers. Sometimes an issue could be caused if you are missing the appropriate prefixes (-moz, -o, -ms, -webkit). Hopefully this helps.