jQuery Mobile Responsive Panel and Textarea

jQuery Mobile Responsive Panel and Textarea

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.