chrome border textarea scroll bug fix

HTML

<pre style="background:#cfcfcf;padding:10px;">
    Fix Chrome top-border bug and caret scrolling, in editablecontent elements (textarea,div,etc)
    
    For this fix to work, the element must have CSS line-height propery set, 
    assume px units for all calculations
</pre>
Line 2
Line 3
Line 4
Line 5
Line 6
Line 7
Line 8
Line 9
Line 10
Line 11
Line 12
Line 13
Line 14
Line 15
Line 16
Line 17
Line 18
Line 19
Line 20
Line 21
Line 22
Line 23
Line 24
Line 25
Line 26
Line 27
Line 28
Line 29
Line 30
<textarea id="t" contenteditable="false">Line 1
Line 2
Line 3
Line 4
Line 5
Line 6
Line 7
Line 8
Line 9
Line 10
Line 11
Line 12
Line 13
Line 14
Line 15
Line 16
Line 17
Line 18
Line 19
Line 20
Line 21
Line 22
Line 23
Line 24
Line 25
Line 26
Line 27
Line 28
Line 29
Line 30
</textarea>

CSS

#t {
    height:200px;
    border-top:30px solid red;
    line-height:18px;
    width:300px;
}

JavaScript

/** 
Fix Chrome bug with textarea
**/
function isVisible() {
    var t = $("#t"); //textarea element
    var lheight = t.css("line-height").replace(/[^-\d\.]/g, ''); //get line-height 
    var cline = getline();
    var cscroll = t.scrollTop();
    if ((cline * lheight - lheight) < cscroll ) { //current line is hidden
        if ((off = cscroll % lheight) === 0) {
            off = lheight;
        }
        t.scrollTop(cscroll - off - (lheight));
    }
}
function getline() {
    var t = $("#t")[0];
    return (t.value.substr(0, t.selectionStart).split("\n").length);
}

$("#t").keyup(function (e) {
    if(e.keyCode == 38 || e.keyCode == 33){ // up arrow | page up
        isVisible(); //check if line is visible and correct offset
    }
});