In textarea autoscroll to bottom doesn't work when typing after webkit-transform

Question

I use iScroll.js in my phonegap application. When I typing message in text area a text doesn't scroll to the bottom automatically in webkit. When I disable -webkit-transform for scrolling div autoscroll works.

I tried to set -webkit-transform: none !important for text area, but it didn't give any results.

Does anybody have any thoughts?

Answer 1

This is webkit bug. As a workaround you can turn off -webkit-transform style from the child of iScroll element while textarea is in focus and immediately set scrollTop value to avoid jumping of scrolled content. And then return original styles on blur. Basic code to handle this will look like this:

// find iScroll block and its child
var scrollBlock = document.getElementById('wrapper');
var iscrollBox = scrollBlock.children[0];
var lastOffset = 0;

// remove translate styles on focus
var focusHandler = function() {
    var styleAttr = getComputedStyle(iscrollBox)['-webkit-transform'];
    var scrolledOffset = new WebKitCSSMatrix(styleAttr).f;

    iscrollBox.style.webkitTransform = '';
    scrollBlock.scrollTop = -scrolledOffset;
    lastOffset = scrolledOffset;
};
var blurHandler = function() {
    scrollBlock.scrollTop = 0;
    iscrollBox.style.webkitTransform = 'translate(0px, '+lastOffset+'px)';
};

// attach focus/blur handlers
var textareas = scrollBlock.querySelectorAll('textarea');
for(var i = 0, l = textareas.length; i < l; i++) {
    textareas[i].onfocus = focusHandler;
    textareas[i].onblur = blurHandler;
}

If you don't like such JavaScript fix - consider using CSS3 property webkit-overflow-scrolling: touch instead of iScroll. It also has some pitfalls, but doesn't have such problem with textarea.