PDA

View Full Version : Android browser doubletap zooming.



twinsen71
23 Jan 2012, 3:55 AM
Hi.
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.

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

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

twinsen71
25 Jan 2012, 4:48 AM
REQUIRED INFORMATION


Ext version tested:

Sencha Touch 2 PR2

Browser versions tested against:

Mobile Safari 4 (Android 2.3.3, Galaxy TAB )

DOCTYPE tested against:

____

Description:

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:



Ext.application({
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>'
].join("")
},
{
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>'
}]
}
]
}).setActiveItem(0);

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();

logger.innerHtmlElement.createChild({
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);

}
});




HELPFUL INFORMATION


Screenshot or Video:


http://youtu.be/Jvzd-Pg2KZ0

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

rdougan
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:


Ext.setup({
viewport: {
preventZooming: true
},
onReady: function() {
//...
}
});


Ext.application({
viewport: {
preventZooming: true
},
launch: function() {
//...
}
});

s.t.a.s
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?