To start off, this might be a tricky one. And I am posting this here in the hope that someone can tell me if this is a bug in rhomobile or in the iscroll script file.
In our application it is possible for users to create checklists with several diffrent questions and answers for those questions. The answers for these questions have several possibilities. For most of the questions the answer will be a simple tekst or a numeric value. But we also have the option to use a select control and make the user choose 1 option out of several. So in theory, it is possible for the user to make a checklist with 100 questions and have 100 answers wich require the user choosing 1 item from the select controls.
To give our application a good scrolling mechanism, we chose to use the iscroll - 4 library wich can be found here: http://cubiq.org/iscroll-4
After some fiddleing with the library, we got it working nicely in our application on all pages, except for the checklist pages. On these pages, problems occur with the select controls. Especially when they are not completely visible.
More detailed with screenshots
Here is a (stripped-down) version of our checklist screen.
With a flick of the finger (or mouse in this case) you can scroll all the way down to the bottom. This is working fine and all but if we create the following situation, things start to break.
We scroll down to Block 2 and set Row 4 half in the bottom of the screen:
So far so good, but when we now click open the select control at row 4, some strange things happen.
First, the application jumps down 2 blocks. We are now down at Block 4 and have row 4 in the bottom of the screen.
Second, when we scroll all the way up, we cant scroll further up then Block 2.
This is wierd, and not really usefull behaviour, since our users have no more options to get to the top of the screen.
Now the question is, is this a bug in the iscroll script or could this be a bug in the webkit source that RhoMobile uses.
Some other insights
- The problem occurs in the Windows Simulator, the Win32 desktop build and on our Samsung Galaxy Tab 2.
On the Android tablet we can only reproduce this behaviour by using the Next and Last buttons that Samsung added to Android to jump trough form buttons.
- The problem does not occur on the ipad or in the Chrome Browser (if we use the local port to access the application in our browser).
- I have tried with and without jquery mobile rendering the select control, both have the same behaviour.
- A reason to believe that this might be related to the Webkit part of RhoMobile is that they add several events to the select control to make this work. And when we try this without iScroll, the select control jumps into view the moment you click on it. This might conflict in some way with other browsers. (If there is any documentation on this point, the help would be really appriciated.)
I hope someone could help me with this problem we are having. This problem currently holds back the Android release of our application and limits us in serving our customers with their own device choises.
Attached you can find the test application I made to reproduce this issue.
scrollTestApplication.zip 473.8 K