Preventing fixed elements from focusing on input in Mobile Safari

Question

I am running into an unstable fixed position error in Safari. I am on iOS9, but I noticed this on iOS8 as well. To reproduce the problem (example link below):

• fixed element across the screen
• fill it with enough content - including a form with multiple inputs - so it scrolls
• set overflow scroll
• open it in mobile Safari
• scroll down until you see the first entrance, and tap it to focus.
• scroll a little more and focus the next one (and pay attention to the jump with an elastic look).
• Scroll a little more and focus on the next and keep moving. The more input you focus, the more crazy the jump becomes.

Example: http://jsbin.com/zaruba/edit?html,css,output

Any help is appreciated.

Answer 1

Try this meta:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" /> 

user-scalable=0 not valid.

From the Safari Development Library , supported meta tags:

custom scalable

Determines whether the user can zoom in or out, regardless of whether the user can zoom in on the viewport. Set yes to enable scaling and not prohibit scaling. The default is yes. Setting scalability for the user also does not prevent the web page from scrolling when entering text in the input field.