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

**DragoslaV** · 14 Sep 2011 11:31 AM

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

Code:

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');
        }
    }
});

**DragoslaV** · 19 Sep 2011 5:01 AM

better to late then never, the test code:

Code:

<!doctype html>
<html>
<head>
    <title>Test case - form</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="apple-mobile-web-app-capable" content="yes">

    <link rel="stylesheet" href="css/sencha-touch.css" type="text/css">
    <script type="text/javascript" src="js/sencha-touch-debug.js"></script>
    <script type="text/javascript">
        Ext.ns('Ext.ux');
        Ext.ux.UniversalUI = Ext.extend(Ext.Panel, {
            fullscreen: true,
            layout: 'card',
            items: [{
                xtype:"form",
                scroll: 'vertical',
                items: [{
                    xtype: "fieldset",
                    title: "Fieldset",
                    margin: "15 15 40 15",
                    defaults: {
                        labelWidth:130,
                        autoCapitalize: false
                    },
                    items: [{
                        xtype: "textfield",
                        name: "whatever",
                        label: "Label 1",
                        placeHolder: "some placeholder"
                    },{
                        xtype: "textfield",
                        name: "whatever",
                        label: "Label 1",
                        placeHolder: "some placeholder"
                    },{
                        xtype: "textfield",
                        name: "whatever",
                        label: "Label 1",
                        placeHolder: "some placeholder"
                    },{
                        xtype: "textfield",
                        name: "whatever",
                        label: "Label 1",
                        placeHolder: "some placeholder"
                    },{
                        xtype: "textfield",
                        name: "whatever",
                        label: "Label 1",
                        placeHolder: "some placeholder"
                    },{
                        xtype: "textfield",
                        name: "whatever",
                        label: "Label 1",
                        placeHolder: "some placeholder"
                    },{
                        xtype: "textfield",
                        name: "whatever",
                        label: "Label 1",
                        placeHolder: "some placeholder"
                    },{
                        xtype: "textfield",
                        name: "whatever",
                        label: "Label 1",
                        placeHolder: "some placeholder"
                    },{
                        xtype: "textfield",
                        name: "whatever",
                        label: "Label 1",
                        placeHolder: "some placeholder"
                    },{
                        xtype: "textfield",
                        name: "whatever",
                        label: "Label 1",
                        placeHolder: "some placeholder"
                    },{
                        xtype: "textfield",
                        name: "whatever",
                        label: "Label 1",
                        placeHolder: "some placeholder"
                    },{
                        xtype: "textfield",
                        name: "whatever",
                        label: "Label 1",
                        placeHolder: "some placeholder"
                    },{
                        xtype: "textfield",
                        name: "whatever",
                        label: "Label 1",
                        placeHolder: "some placeholder"
                    },{
                        xtype: "textfield",
                        name: "whatever",
                        label: "Label 1",
                        placeHolder: "some placeholder"
                    },{
                        xtype: "textfield",
                        name: "whatever",
                        label: "Label 1",
                        placeHolder: "some placeholder"
                    },{
                        xtype: "textfield",
                        name: "whatever",
                        label: "Label 1",
                        placeHolder: "some placeholder"
                    },{
                        xtype: "textfield",
                        name: "whatever",
                        label: "Label 1",
                        placeHolder: "some placeholder"
                    },{
                        xtype: "textfield",
                        name: "whatever",
                        label: "Label 1",
                        placeHolder: "some placeholder"
                    },{
                        xtype: "textfield",
                        name: "whatever",
                        label: "Hello",
                        placeHolder: "Type 'Hello World' after it try adding 'cruel'"
                    }]
                }]
            }]
        });
        Ext.setup({
            onReady: function() {
                Ext.mainUI = new Ext.ux.UniversalUI();
            }
        });
    </script>
</head>
<body>
</body>
</html>

**DragoslaV** · 20 Sep 2011 2:36 AM

Ok update #2. I removed my 'dirty override' because it was giving performance issue's and bugs in other components.

New code, add this on top of your form:

Code:

                        defaults: {
                            listeners: {
                                    focus: function() {
                                         Ext.changeTransformIntoTop(YourFormPanelVariable,this,false);
                                     },
                                     blur: function() {
                                         Ext.changeTransformIntoTop(YourFormPanelVariable,this,true);
                                     }
                        },

Code:

Ext.changeTransformIntoTop = function(subclass,field,removeIt) {
    if(subclass.scrollEl != undefined) {
        if(removeIt === false) {
            subclass.scroller.useCssTransform = false;
            subclass.scrollEl.dom.style['-webkit-transform'] = "";
            subclass.scrollEl.dom.style['top'] = subclass.scroller.offset.y+"px";
            //console.log('swap transform with top');
        } else {
            subclass.scroller.useCssTransform = true;
            subclass.scrollEl.dom.style['top'] = "";
            subclass.scrollEl.dom.style['-webkit-transform'] = "translate3d(0px, "+subclass.scroller.offset.y+"px, 0px)";
            //console.log('swap top with transform');
        }
    }
};

It's still a dirty workaround, but scrolling will be more smooth and you can select text.

**DragoslaV** · 10 Oct 2012 7:08 AM

Any updates?
Did apple fixed it? is it fixed in Sencha 2?

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

Thread Tools

Search Thread

Display

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

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

Tags for this Thread