Possible problem/bug with jQuery Mobile and position:absolute on some mobile devices
Hi there,
I've been running in a problem on a Samsung Galaxy S3. Apparently the combination of CSS "position: absolute;", "top: <X>px;" and jQuery Mobile causes some problems on this device (and possibly on others as well).
Sorry for the wall of text, I want to describe the problem as best as I can.
Longer description of the problem/error/bug(?):
A user reported that he could'nt type anything in the LogOn-form. If he selects an input field and begins to type it wont accept (and show) characters from a-z, A-Z and 0-9. Every other special character like "@", ".", etc. is accepted and will be shown in the field.
Also, if you type "ggg" (or any other random normal character sequence) and then a random special character like "@" it will show "g@" in the field. So, the first character is remembered and will be shown after hitting a special character that is working anyway.
I've grabbed a S3 and tried it myself and, yes, it's behaving the way he described it. As only a-z, A-Z and 0-9 seem to be a problem and the form examples on the jquery mobile website are working on the S3 I thought of some messed up regular expression somewhere in my code or some plugin I used.
The login form itself is simple HTML (enhanced by jQM) with two inputs and a submit button. The form is centered on the screen.
After disabling all my code and all additional plugins the error still occured.
So, I've created little (local) test page with just jQuery 1.7.2, jQM 1.1.1 and the default 1.1.1 stylesheet. I've styled it the same way the login page was and tried it: Problem occured.
After disabling only my custom CSS the page was working fine. Strange. So I removed bit by bit and after removing "position: absolute;" (that is used to center the form on the screen) it suddenly worked.
After some testing the problem seemed to be the combination of jQM, "position: absolute" and "top: <x>px".
I've created a jsFiddle for demonstration purposes.
Demo:
Input with "position: absolute;" and "top: 50px;" not working: http://jsfiddle.net/ASsdP/2/
Input just with "position: absolute;" working: http://jsfiddle.net/ASsdP/1/
The problem also occurs when using jQM 1.2.0 (and its default stylesheet) so that's not the solution, sadly.
It looks like as soon as the input-fields are placed inside a container that is positioned absolute and has a space from top (50 pixels are enough) it will cause this problem on the S3.
Anyone here who had the same problem before and found a solution, without needing to remove all "position: absolute;"?
Kind regards
Hannes
Edit:
This problem is not occuring on iPhone, iPad, Windows Phone 7, HTC Desire HD, Firefox, Opera, Chrome. For now only the S3 seems to have this problem.