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