Hybrid View

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User
    Join Date
    Sep 2011
    Posts
    8
    Vote Rating
    0
    DragoslaV is on a distinguished road

      0  

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

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


    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');
            }
        }
    });
    Last edited by DragoslaV; 21 Sep 2011 at 2:36 AM. Reason: updated framework to 1.1.0 - same problem

  2. #2
    Sencha User
    Join Date
    Sep 2011
    Posts
    8
    Vote Rating
    0
    DragoslaV is on a distinguished road

      0  

    Default


    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>

  3. #3
    Sencha User
    Join Date
    Sep 2011
    Posts
    8
    Vote Rating
    0
    DragoslaV is on a distinguished road

      0  

    Default


    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.

  4. #4
    Sencha User
    Join Date
    Sep 2011
    Posts
    8
    Vote Rating
    0
    DragoslaV is on a distinguished road

      0  

    Default


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

  5. #5
    Sencha User
    Join Date
    Sep 2011
    Posts
    8
    Vote Rating
    0
    DragoslaV is on a distinguished road

      0  

    Default


    2 years passed and not a single post...

Tags for this Thread