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;
}
}
}
