Results 1 to 5 of 5

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

Threaded View

Previous Post Previous Post   Next Post Next Post
    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
      0  

    Default 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

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •