Skip to content
This repository

1.1 RC1 iOS Input Field Zoom #3690

Closed
brianantonelli opened this Issue · 10 comments

5 participants

Brian Antonelli Lars telepras Alex Bachuk Jasper de Groot
Brian Antonelli

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

Brian Antonelli

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 );
    }
});
Brian Antonelli

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

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

Lars
nn5 commented

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?

Brian Antonelli

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">

Lars
nn5 commented

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

Brian Antonelli

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

Lars
nn5 commented

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

Alex Bachuk

This worked for me too. Thanks!

Jasper de Groot
Collaborator

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.