Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

iOS select auto-zoom on focus workaround #3389

Closed
toddparker opened this Issue · 2 comments

3 participants

@toddparker

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.

@scottjehl scottjehl was assigned
@adammessinger

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.

@toddparker

If you look at master, we've written our own zoom fix that is better and only targeted to iOS.

@toddparker toddparker closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.