View Full Version : Android browser doubletap zooming.

23 Jan 2012, 3:55 AM
I'm developing a mobile web game with sencha touch 2.
in that game, I'm using a 'canvas' element.

but, whenever a 'doubletap' event fired on the 'canvas', the view was cracked.

It happens only in android devices not in iPhones.
I guess it may related to 'doubletap zooming' of android browser.

How can I get Solutions about this.

23 Jan 2012, 8:09 AM
What do you mean "cracked"?

23 Jan 2012, 3:43 PM
We're aware of this issue, and if we can fix it, we will.

25 Jan 2012, 4:48 AM

Ext version tested:

Sencha Touch 2 PR2

Browser versions tested against:

Mobile Safari 4 (Android 2.3.3, Galaxy TAB )

DOCTYPE tested against:



when 'doubletab' event fired in Samsung Galaxy Tab device,
'canvas' element of HTML5 seems to be broken.
in iPhone and some Android devides(Galaxy S, Galaxy nexus, Galaxy Note), no problems found.

Steps to reproduce the problem:

open the test URL(http://www.twitplay.net/test.html).
move to 'canvas' tab.
'doubletab' on the black area repetedly.
move to other tabs and return to 'canvas' tab.
'doubletab' again and again.

The result that was expected:

ordinary tab panel navigation with non broken view.

The result that occurs instead:

sometimes, the view is cracked when 'doubletab' is fired.
the view is cracked by overlap with back panel.

Test Case:

name : 'RedBalloon',

viewport: {
autoMaximize: false

launch : function() {
Ext.create("Ext.TabPanel", {
fullscreen: true,
tabBarPosition: 'bottom',

items: [
title: 'Home',
iconCls: 'home',
cls: 'home',
html: [
'<img width="30%" src="http://staging.sencha.com/img/sencha.png" />',
'<h1>Welcome to Sencha Touch</h1>',
"<p>You're creating the Getting Started app. This demonstrates how ",
"to use tabs, lists and forms to create a simple app</p>",
'<h2>Sencha Touch (2.0.0pr1)</h2>'
xtype: 'list',
title: 'List',
iconCls: 'star',

itemTpl: '{title}',
store: {
fields: ['title', 'url'],
data: [
{title: 'Ext Scheduler 2.0', url: 'ext-scheduler-2-0-upgrading-to-ext-js-4'},
{title: 'Previewing Sencha Touch 2', url: 'sencha-touch-2-what-to-expect'},
{title: 'Sencha Con 2011', url: 'senchacon-2011-now-packed-with-more-goodness'},
{title: 'Documentation in Ext JS 4', url: 'new-ext-js-4-documentation-center'}
title: 'Canvas',
iconCls: 'info',
xtype : 'panel',
layout : 'hbox',
items : [{
html : '<canvas id="TEST_CANVAS" width="320" height="280"></canvas>'
xtype : 'panel',
id : 'logger',
scrollable : true,
width : 320,
height : 280,
html : '<span>TEST CANVAS LOG</span>'

this.canvas = document.getElementById('TEST_CANVAS');
this.ctx = this.canvas.getContext("2d");

this.pageX = 35;
this.pageY = 80;

var eventDispatcher = this.getEventDispatcher();

eventDispatcher.addListener('element', '#TEST_CANVAS', '*', this.logging, this);

var nTimer = setInterval(Ext.Function.bind(this.drawTest, this), 16);

logging : function(a, b, c, d) {
this.pageX = a.touch.point.x;
this.pageY = a.touch.point.y;

var logger = Ext.getCmp('logger'),
scroller = logger.getScrollable().getScroller();

html : a.type + '[' + this.pageX + ', ' + this.pageY + ']' + ' : ' + d.info.eventName

scroller.scrollTo(0, scroller.getSize().y - scroller.getContainerSize().y);

drawTest : function() {
this.ctx.strokeStyle = '#' + parseInt(Math.random() * 0x1000000);
this.ctx.fillStyle = '#000';
this.ctx.font = '30px sans-serif bold';
this.ctx.textBaseline = 'top';

this.ctx.fillRect(0, 0, 320, 280);
this.ctx.fillStyle = '#FFF';
this.ctx.fillText('DoubleTab Here !!!', this.pageX, this.pageY);
this.ctx.strokeText('DoubleTab Here !!!', this.pageX, this.pageY);



Screenshot or Video:


See this URL for live test case: http://www.twitplay.net/test.html

25 Jan 2012, 9:22 AM
Okay so I've figured out why this is the case.

It happens because Ext.Viewport#preventZooming (http://docs.sencha.com/touch/2-0/#!/api/Ext.viewport.Default-cfg-preventZooming) is now false by default in PR4. Setting this value to true means that double tap will not zoom, but it also means that any <a> link tags will not work, and there are a few issues with the Map component as well.

You can turn this back on by using the viewport configuration of Ext.setup/Ext.application:

viewport: {
preventZooming: true
onReady: function() {

viewport: {
preventZooming: true
launch: function() {

9 Jul 2012, 6:41 AM
Setting this value to true means that double tap will not zoom, but it also means that any <a> link tags will not work
But how hyperlinks are related with zooming? For example, I want to use <a> but I don't need zooming on HTC by double tap. How to solve it?