Responsive sidebar and input

Question

I have an issue with a responsive menu containing an input. The original thread is here: Fixed Responsive Top Nav / Off Canvas Nav with Single DOM Element

If I add an extra li, with an input (for a search field), I get a jump if I click the input. This happens only if I have scrolled before opening the sidebar.

ul class="left">
      <li class="divider divider-first"></li>
      <li class="active"><a href="#_" class="toggle-nav">Main Item 1</a></li>
      <li class="divider"></li>
      <li><a href="#_" class="toggle-nav">Main Item 2</a></li>
      <li>
        <form method="get" action="/search.html">
          <input type="text" placeholder="Search" name="Search">
        </form>
      </li>
</ul>

Here's the fiddle with the extra li: http://jsfiddle.net/29qgW/5/ If you open the result window on an iPhone, you can see it happening.

Some kind of margin gets added above both the sidebar and the top bar. I tried to find it with the iOS simulator, but the margin is not really there as a style.

It gets even worse if you try to scroll after having selected the input. How can this be fixed? I've tried to change the metatag to disallow user zooming, but that doesn't work.

Does anyone know how to fix this?

Update: edited to show metatag, and closed input tag.