Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
iOS select auto-zoom on focus workaround #3389
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:
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.
I applied the linked-to fix to a jQM site I'm currently working on and found that it introduced a bug in the Android browser. When you tap on a non-select form field, the field gains focus but the page scrolls all the way back to the top and no soft keyboard appears. Commenting out the fix resolved this problem.
Since the issue in question only seems to affect iOS, I'll probably end up selectively applying the fix with UA sniffing.