CODEWITHSUNDEEP
androidcssjquery-mobile
Rohit Mehta
Rohit Mehta

Reputation: 63

Page Jumps on android browser on text input

I have a login page which is giving a lot of pain. Whenever try to input text, the page jumps badly. I have tried turning off -webkit-backface-visibility. Any suggestions?

Upvotes: 0

Views: 1274

Answers (3)

Augie Gardner
Augie Gardner

Reputation: 2775

This is caused by 3d transforms being applied to the input element or a parent of the input element.

For example, I had added transforms to my elements to force GPU acceleration to make CSS transitions faster using the code:

.GPUAccel, .GPUAccel div:not(.noGPUAccel) {
    -webkit-transform: rotateZ(360deg);
    -webkit-backface-visibility: hidden;
}

Which inadvertently caused some test phones (for example, the LG optimus slider), to bounce around when typing characters into the input fields.

Removing the GPU Acceleration, or transformations, from the parent element, solved this issue.

This seems to be a rather elusive issue.

Upvotes: 1

bpn
bpn

Reputation: 3232

Are you making use of jq-touch? I faced this issue when using the same. I solved it by playing around with the position attribute in the css, changed it to be absolute.

Upvotes: 0

Clarence Liu
Clarence Liu

Reputation: 4019

Is the browser zooming? I had issues with the browser zooming on inputs/dialogs etc... Try setting <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"> in your <head/>

Upvotes: 0

Related Questions