Skip to content

1.1 RC1 iOS Input Field Zoom #3690

Closed
brianantonelli opened this Issue Mar 1, 2012 · 10 comments

5 participants

@brianantonelli

On iOS when you tap into an input field the browser zooms in and then back out.

Tap to focus on the field and it will zoom on 1.1: http://jquerymobile.com/test/docs/forms/textinputs/

Same thing on 1.0.1 works fine: http://jquerymobile.com/demos/1.0.1/docs/forms/textinputs/

Tested on iOS 4.x and 5.x

@brianantonelli

It looks like this happens on the blur event added to input fields. It re-enables zoom regardless of whether or not it was originally enabled. (line 5627)

.bind( "blur", function() {
    if( o.preventFocusZoom ){
        $.mobile.zoom.enable( true );
    }
});
@brianantonelli

Temporary work-around if you don't want the user to be able to resize your page.

$.extend($.mobile.zoom, {locked:true,enabled:false})

@nn5
nn5 commented Mar 1, 2012

Thanks for your suggestion.

Double tapping a text still zooms the entire screen a notch, though.
I. e. the $.mobile.zoom does not seem to have much effect?

@brianantonelli

That solved the problem for me. Do you have user scaling turned off?

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

@nn5
nn5 commented Mar 2, 2012

Yes, exact same meta.
Add a couple of lines of text in a div that has some margin: After focus/blur of an input that text will be double-tap-able and zoom in

@brianantonelli

Weird. After clicking what is $.mobile.zoom.enable set to?

@nn5
nn5 commented Mar 4, 2012

Have examined the issue further:
As you have pointed out, the problem is that all input blurs enables zooming and unlocks it with
$.mobile.zoom.enable( true );
Patching this solves the problem.

@telepras

Amazing find . This one solved the issue for me . Thanks

@abachuk
abachuk commented Jul 23, 2012

This worked for me too. Thanks!

@jaspermdegroot
jQuery Foundation member

This issue has been fixed by commit b8c5e45.
However, we noticed that on iOS5 when the font-size is set to anything smaller than 1em/16px (i.e. data-mini="true") the browser still zooms in. This has been fixed in iOS6.

Closing as fixed.

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.