Android Webkit Input elements buggy with CSS3 translate3D
- by Dansl
I'm having a couple issues with the Input element in a Webkit Android App i'm developing. Testing on 2.X, but 3.x doesn't seem to have these issues...
The app works by having separate Div's for each "page", and I'm using CSS3 translate3D to animate between the pages. Some of those pages include Input elements. When I tap on the input to gain focus, any of my "position:fixed" Div's will shift about 5px from the top, and 5px left. Now the kicker... it will eventually fix itself, and then never happen again when you tap on an input, its only that first time...
My other problem, the Input elements are screwy with keyboards, for instance, spell corrections/autocomplete will not input text, and when using Swype Keyboard, you can't "swipe" the word, ONLY individual taps for each letter will input text into the Input element.
I've read that a lot of these might be caused by CSS3 Translate3D. But, I've tried just about everything to fix these issues, and I've searched just about every site for a solution, but havent been able to find a fix, or find anyone else with this issue...
Does anyone else have these issues, or know of a fix?
(Possible solution??) Anyone know of a way to override the default behavior of Input elements in the webkit? I wonder if I can generate my own TextView and position it over these input fields...?
Any help is greatly appreciated :)