From 1ad3eeaf982e76f0d87b621670475b24a23b0d8e Mon Sep 17 00:00:00 2001 From: scottjehl Date: Tue, 27 Sep 2011 12:34:17 -0400 Subject: [PATCH 1/3] accelerate elements within the page in touch-enabled scenarios to prevent hidden elements (not just blinking, but flat-out disappearing) --- themes/default/jquery.mobile.core.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/themes/default/jquery.mobile.core.css b/themes/default/jquery.mobile.core.css index 42dae9b3..c6a09085 100644 --- a/themes/default/jquery.mobile.core.css +++ b/themes/default/jquery.mobile.core.css @@ -35,6 +35,9 @@ -o-overflow-scrolling: touch; -ms-overflow-scrolling: touch; overflow-scrolling: touch; +} +.ui-page.ui-mobile-touch-overflow, +.ui-page.ui-mobile-touch-overflow * { /* some level of transform keeps elements from blinking out of visibility on iOS */ -webkit-transform: rotateY(0); } From 47480d69f9f91c91d5b37df332c8605144ad626f Mon Sep 17 00:00:00 2001 From: scottjehl Date: Tue, 27 Sep 2011 12:36:24 -0400 Subject: [PATCH 2/3] when touch overflow scrolling is supported and enabled, user scaling can create serious usability issues where it's difficult to get zoomed back out. This disables user scaling when that overflow scrolling is enabled (currently only projected for ios5 support) --- js/jquery.mobile.fixHeaderFooter.native.js | 4 ++++ js/jquery.mobile.init.js | 18 ++++++++++++++++++ 2 files changed, 22 insertions(+) diff --git a/js/jquery.mobile.fixHeaderFooter.native.js b/js/jquery.mobile.fixHeaderFooter.native.js index 0cd68763..f9c1859a 100644 --- a/js/jquery.mobile.fixHeaderFooter.native.js +++ b/js/jquery.mobile.fixHeaderFooter.native.js @@ -7,8 +7,12 @@ (function( $, undefined ) { +// Enable touch overflow scrolling when it's natively supported $.mobile.touchOverflowEnabled = true; +// Enabled zoom when touch overflow is enabled. Can cause usability issues, unfortunately +$.mobile.touchOverflowZoomEnabled = false; + $( document ).bind( "pagecreate", function( event ) { if( $.support.touchOverflow && $.mobile.touchOverflowEnabled ){ diff --git a/js/jquery.mobile.init.js b/js/jquery.mobile.init.js index 36caca10..83f83bb3 100644 --- a/js/jquery.mobile.init.js +++ b/js/jquery.mobile.init.js @@ -103,6 +103,24 @@ } } }); + + // This function injects a meta viewport tag to prevent scaling. Off by default, on by default when touchOverflow scrolling is enabled + function disableZoom() { + var cont = "user-scalable=no", + meta = $( "meta[name='viewport']" ); + + if( meta.length ){ + meta.attr( "content", meta.attr( "content" ) + ", " + cont ); + } + else{ + $( "head" ).prepend( "", { "name": "viewport", "content": cont } ); + } + } + + // if touch-overflow is enabled, disable user scaling, as it creates usability issues + if( $.support.touchOverflow && $.mobile.touchOverflowEnabled && !$.mobile.touchOverflowZoomEnabled ){ + disableZoom(); + } // initialize events now, after mobileinit has occurred $.mobile._registerInternalEvents(); From 9b86fddf897dac89c049ffda50a5ec956a3993d8 Mon Sep 17 00:00:00 2001 From: scottjehl Date: Tue, 27 Sep 2011 12:37:10 -0400 Subject: [PATCH 3/3] disabled touch overflow scrolling by default. overridable through $.mobile.touchOverflowEnabled. --- js/jquery.mobile.fixHeaderFooter.native.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/jquery.mobile.fixHeaderFooter.native.js b/js/jquery.mobile.fixHeaderFooter.native.js index f9c1859a..7cc531fc 100644 --- a/js/jquery.mobile.fixHeaderFooter.native.js +++ b/js/jquery.mobile.fixHeaderFooter.native.js @@ -8,7 +8,7 @@ (function( $, undefined ) { // Enable touch overflow scrolling when it's natively supported -$.mobile.touchOverflowEnabled = true; +$.mobile.touchOverflowEnabled = false; // Enabled zoom when touch overflow is enabled. Can cause usability issues, unfortunately $.mobile.touchOverflowZoomEnabled = false;