Scrolling broken after using iOS soft keyboard's 'Next' button

[cletusw]

REQUIRED INFORMATION

Sencha Touch versions tested:

• 2.0.1
• 2.0.1.1

Browser versions tested against:

• Safari (on iOS 5.1.1)
• Chrome 19.0.1084.60 (on iOS 5.1.1)

DOCTYPE tested against:

• html (as in HTML5)

Description:

• When you use the 'Next' button in the iOS soft keyboard and it has to 'scroll' to the next text field, it ruins Sencha Touch's scrolling.

Steps to reproduce the problem:

• Tap the first text field
• Tap 'Next' a few times on the soft keyboard that appears to get to the last text field
• Tap 'Done'

The result that was expected:

• I should still be able to scroll back up to see the first text field

The result that occurs instead:

• The view has been reset so that the 'top' of the scrollable area is just above the last text field and the 'bottom' is way out in blackness

Test Case:

Ext.Loader.setConfig({
    enabled: true
});


Ext.application({
    name: 'SenchaFiddle',
    
    launch: function() {
        Ext.Viewport.add(Ext.create('Ext.Panel', {
            fullscreen: true,
            scrollable: 'vertical',
            items: [{
                xtype: 'textfield',
                placeHolder: 'text',
                minHeight: '400px'
            }, {
                xtype: 'textfield',
                placeHolder: 'text',
                minHeight: '400px'
            }, {
                xtype: 'textfield',
                placeHolder: 'text',
                minHeight: '400px'
            }]
        }));
    }
});

HELPFUL INFORMATION

Possible fix:

• Looks like Sencha Touch uses -webkit-transform: translate3d to do its scrolling. Maybe this is incompatible with the 'scrolling' that the soft keyboard's 'Next' button does?

Additional CSS used:

• only default sencha-touch.css

Operating System:

• iOS 5.1.1

[mitchellsimoens]

Thanks for the report.

[Jamie Avins]

This is why we don't use translate3d on Form panels...

Your scrollable configuration will need to be:

scrollable: {
translationMethod: 'scrollposition'
}

Though this will impact performance somewhat, it should resolve the scrolling issue. You can also use a Form panel instead which does this as well.

[cletusw]

Well, that does fix the problem, but it has a weird side effect. When you first start scrolling after tapping 'Done' per the last step, it instantly jumps to the top of the panel then starts scrolling from there.

[cletusw]

Also, we actually were using a Form Panel in our app, we just had

scrollable: 'vertical'

in our config which, unlike

scrollable: { direction: 'vertical' }

obliterates this

translationMethod

setting. That would probably be a candidate for the docs.

[gruszks]

This problem still occurs especially in horizontal view.

Quick fix, instead of:

scrollable: 'vertical'

Use:

scrollable: {
    direction: 'vertical'
},