Android browser doubletap zooming.

[twinsen71]

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]

What do you mean "cracked"?

[rdougan]

We're aware of this issue, and if we can fix it, we will.

[twinsen71]

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:

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

[rdougan]

Okay so I've figured out why this is the case.

It happens because Ext.Viewport#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]

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?