jquery/jquery-mobile — Issue #3389: iOS select auto-zoom on focus workaround
Author: toddparker
Created: 2012-01-06 16:55:39+00:00
State: open

Currently in iOS, the page will zoom in when you click on a jQM select with native menu. This is usability feature to make it easier to see the contents of an input or select on non-optimized pages, but unfortunately this happens even though the select fits comfortably on the screen.

The real issue with this is when you make a section in the select and it closes, iOS does not return you tot eh previous zoom level so every time you use a select, you must manually pinch zoom back out. This can be challenging when using a select as a filter for a listview because pinch zooming out over a list can be tricky with all the events in play (most of the screen is clickable in a listview).

We see a number of developers disabling user zoom via the viewport tag to work around this issue but we'd like to improve the select behavior to encourage devs to leave zoom enabled.

This technique is a bit of a hack, but it seems to work quite well in our testing. The only downside is that you do broefly zoom in, then back out when you focus on a select which can look a bit odd, but it seems like a reasonable tradeoff:
http://nerd.vasilis.nl/prevent-ios-from-zooming-onfocus/

The plan is to look into adding a workaround like this to prevent the zoom in behavior. We can probably improve this by only applying the binding if zoom is enabled to reduce the overhead.