iPad: Scrolling 'below the fold' will disable native magnifier and selecting text

[DragoslaV]

Sencha Touch version tested:

• 1.1.0
• only default ext-all.css

Platform tested against:

• iOS 4 (on iPad)

Description:

• 'Transform: translate3d' will make it unable to use the native text selecting tools (e.g Magnifier) on inputs that is below the fold.

Steps to reproduce the problem:

• create a large form, with input fields below the fold
• scroll to an inputfield that is below the fold
• type "Hello World"
• after that try adding "cruel" between the words.

The result that occurs instead:

• you can't add "cruel" without deleting World

Debugging already done:

• Override of functions: onScrollStart() and onScrollEnd() within Ext.util.ScrollView

Possible fix:

• Change transform value's into top value's

My dirty override (wont work with all components, works on lists,panels and datepicker):

Ext.override(Ext.util.ScrollView , {
    onScrollStart: function() {
        this.showIndicators();
        
        failed = false;
        var elm = Ext.getCmp(this.scroller.container.id);
        if(elm !== undefined) {
            if(elm.renderData !== undefined) {
                if(elm.renderData.componentCls != "x-picker-slot") {
                    failed = true;
                }
            } else {
                failed = true;
            }
        } else {
            failed = true;
        }
        if(failed) {
            var subclass = this.scroller.el.dom;
            subclass.style["-webkit-transform"] = "translate3d(0px, "+this.scroller.offset.y+"px, 0px)";
            subclass.style["top"] = "";
            //console.log('swaped top into transform');
        }
    },
    onScrollEnd: function() {
        this.hideIndicators();
        
        failed = false;
        var elm = Ext.getCmp(this.scroller.container.id);
        if(elm !== undefined) {
            if(elm.renderData !== undefined) {
                if(elm.renderData.componentCls != "x-picker-slot") {
                    failed = true;
                }
            } else {
                failed = true;
            }
        } else {
            failed = true;
        }
        if(failed) {
            var subclass = this.scroller.el.dom;
            subclass.style["-webkit-transform"] = "";
            subclass.style["top"] = this.scroller.offset.y+"px";
            //console.log('swaped transform into top');
        }
    }
});