javascript - wierd function behavior on osX with google chrome browser

Question

This text area is an auto expanding text area that stops expanding when it is the height of 4 lines.

mac problem http://dl.dropbox.com/u/8196173/mac_problem.PNG windows version http://dl.dropbox.com/u/8196173/windows_version.PNG

So the one on the left is how the text box is getting displayed on mac with Google chrome and the one on the right is how it is getting displayed on windows. The windows version is the correct one. For some reason chrome on mac does not add the same amount of height to the text area each time it expands which means that it ends up smaller and hence the extra space at the bottom. But for the life of me I don't know why it would behave like this just because its on a different OS.

I can include code if people really want it but its almost a hundred lines (there are other things being moved on the page when this expands) and I honestly don't see how it could be the code since it works on windows and only exhibits the odd behavior on osX.

Edit: this is happening inside of a chrome extension in case that makes a difference.

    var temp = 0;
    //function that actually handles the resizing
        function resize() {
            temp = text.style.height;
            text.style.height = 18;
            text.style.height = text.scrollHeight + 'px';
            var styledef = window.getComputedStyle(text);
            pixelMargin = parseInt(styledef.marginTop, 10);
            num = parseInt(container.style.height, 10);
            re_num = parseInt(reply_container.style.marginTop, 10);
            var temp_num = parseInt(temp, 10);
            text_height = parseInt(text.style.height, 10);
            if(temp_num == 0) { //if nothing has been done in the text area do this
                temp = text.style.height;
            } else if(text_height == 18) { //else if the text area is only one line do this
                text.style.marginTop = '3';
                reply_container.style.marginTop = '0px';
                container.style.height = '364px';
                container.scrollTop = container.scrollHeight;
            } else if(temp_num < text_height) { //else the box is getting bigger 
                if(text_height <= 66 ) {
                    pixelMargin -= 15;
                    num -= 16;
                    re_num += 16;
                    conversation_scroll_pos += 16;
                    text.style.marginTop = pixelMargin.toString() + 'px';
                    container.style.height = num.toString() + 'px';
                    reply_container.style.marginTop = re_num.toString() + 'px';
                    container.scrollTop = container.scrollHeight;
                    temp = text.style.height;
                } else if(text_height >= 66 && temp_num > 20) { //case where the box has reached its max height and the user is still typing
                    temp = text.style.height;
                } else if(text_height > 66 && pixelMargin == 3) { //edge case to handle cuting and pasting into the box
                    text.style.marginTop = '-42px';
                    reply_container.style.marginTop = '48px';
                    container.style.height = '316px';
                    container.scrollTop = container.scrollHeight;
                    temp = text.style.height;
                }
            } else if(temp_num > text_height) { //else the box is getting smaller
                if(pixelMargin < 3 && pixelMargin >= -45 && text_height < 66) {
                    pixelMargin += 15;
                    num += 16;
                    re_num -= 16;
                    text.style.marginTop = pixelMargin.toString() + 'px';
                    container.style.height = num.toString() + 'px';
                    reply_container.style.marginTop = re_num.toString() + 'px';
                    temp = text.style.height;
                }
            }

        }

Answer 1

Waitting for answers