jQuery Mobile Responsive Panel and Textarea

Question

I've got jQuery Mobile application http://gudulin.ru/test/problem.html.

Left panel opens after page loads: $('#my-panel').panel("open");

I added a class ui-responsive-panel to my page and @media css stuff, so I can work with panel and page content together.

Everything is OK on laptops browser, but there is a problem on iPad browser (Safari or whatever else). When left panel is opened and I'm starting type text into text area, a page jumps after typing any symbol. The problem comes when you start typing at the bottom of textarea (when text goes down the keyboard).

If you didn't get what I mean watch the video: http://www.youtube.com/watch?v=Q6_kM_FshrQ.

How to reproduce:

1. Open http://gudulin.ru/test/problem.html with iPad
2. Check that the left panel is opened
3. Write anything into text area and press enter button a couple of times.

Thanks.

Answer 1

I've pasted the same question on jQuery Mobile forum http://forum.jquery.com/topic/jquery-mobile-responsive-panel-and-textarea and got the answer from ishmaelaz, so I'm leaving it here to close this question.

I have been fighting the same problem for months in a similar responsive panel layout, although with text fields. I found the cause last week, but haven't had time to assemble a demonstration of the issue.

To work around the issue, edit jquery.mobile and look for _bindFixListener: (it's line 8149 in 1.3.0). In this routine, comment out the throttledresize handler. Once you do that, jumping stops.

As best I can tell, the issue here is that iOS sends resize events as you type input text fields. This is causing this handler to fire, which calls _positionPanel. _positionPanel tries to ensure that the panel is visible, presumably since this logic is aimed at a non-responsive scenario in which case the panel really always should be visible to be useful, but in the responsive scenario, it just leads to constant jumping.

The keyboard being visible seems to be a crucial piece of the computations going wrong, as I've found that if you add a tall div to the bottom of the page to make it longer, then this logic doesn't trigger, seemingly since the bottom of the page isn't "under" the keyboard. I haven't tested that as far, though, as once I found a way to make the jump stop, I was happy.

Answer 2

use this window.resize due to virtual keyboard causes issues with jquery mobile

it will be great solution.
1) Go into jquery.mobile-1.x.x.js

2) Find $.mobile = $.extend() and add the following attributes:

last_width: null,
last_height: null,
3) Modify getScreenHeight to work as follows:

getScreenHeight: function() {
    // Native innerHeight returns more accurate value for this across platforms,
    // jQuery version is here as a normalized fallback for platforms like Symbian

    if (this.last_width == null || this.last_height == null || this.last_width != $( window ).width())
    {
        this.last_height = window.innerHeight || $( window ).height();
        this.last_width = $(window).width();
    }
    return this.last_height;
}