Swipe Gesture on iOS broken after applyData on Component when tpl contains table tag

**terussell85** · 28 Mar 2012 10:52 AM

REQUIRED INFORMATION

Version tested:

Sencha Touch 2.0.0 gpl

Browser versions tested against:

Mobile Safari - iOS 5.1
Google Chrome - 17.0.963.83

DOCTYPE tested against:

<!DOCTYPE HTML>

Description:

The swipe gesture in iOS appears to be broken when a component is redrawn and its tpl includes a <table> tag. The first time a swipe is issued, it behaves normally. However, after the first redrawn, subsequent "swipes" only fire after an extra "tap" is registered on screen. The problem does not seem to occur in Google Chrome. See the example for further behavior.
Also, if the <table> is removed from the template, it behaves correctly.

Steps to reproduce the problem:

Swipe once
Swipe again. Nothing happens until you tap the screen.

The result that was expected:

All swipes should fire on release of swipe.

The result that occurs instead:

The first swipe works correctly, but subsequent swipes do not seem to trigger until an extra tap happens.

Test Case:

Code:

    Ext.define("SwipeTest.view.Main", {   
    extend: 'Ext.Container',
    xtype: 'swipertest',


    config:{
        title: 'test',
        iconCls: 'team',
        value: null,
        scrollable: false
    },


    constructor: function() {
        if(!this.getValue()){
            this.setValue(1);
        }
        this.setTpl(new Ext.XTemplate(
            '<table class="dt-picker-weeks">',
                '<tbody class="days">',
                '<tr class="day-row">', //start first row
                '<tpl for=".">',
                '<td class="day-block">{num}</td>',
                '</tpl>',
                '</tr>',
                '</tbody>',
            '</table>'
        ));


        this.callParent(arguments);


        this.refresh();
    },


    initialize: function() {
        this.element.on({
            swipe: this.onSwipe,
            scope:    this
        });
        this.callParent(arguments);
    },


    onSwipe: function(e) {
        var direction = e.direction === 'left' ? 1 : -1;
        this.setValue(this.getValue() + direction);
        this.refresh();
    },


    refresh: function() {
        this.setData([{num:this.getValue()}]);
    }
});

HELPFUL INFORMATION

Additional CSS used:

Default

Operating System:

Windows 7

**Jamie Avins** · 28 Mar 2012 11:39 AM

I am able to reproduce this, we'll look into it.

**Jamie Avins** · 28 Mar 2012 11:58 AM

You've run into a browser repainting issue. You will need to force the browser to show your change with this.element.redraw(); We'll look into it further to see if there might be a gentler way to kick the browser.

**Jamie Avins** · 29 Mar 2012 9:23 AM

Better with just accessing the offsetHeight, but we still need to fix the general case:

Code:

                    onSwipe:function (e) {
                        var direction = e.direction === 'left' ? 1 : -1;
                        this.setValue(this.getValue() + direction);
                        this.refresh();
                        this.element.dom.offsetHeight;
                    },

**Jamie Avins** · 29 Mar 2012 2:35 PM

The next release will include a workaround for this issue on iOS without flickering or other intervention needed. Painful working around these browser bugs sometimes.

Swipe Gesture on iOS broken after applyData on Component when tpl contains table tag

Thread Tools

Search Thread

Display

Swipe Gesture on iOS broken after applyData on Component when tpl contains table tag

Swipe Gesture on iOS broken after applyData on Component when tpl contains table tag