DIV scrollHeight changes after refresh?

Question

I have a home grown chat system I wrote for a web app. Originally the chats showed the most recent messages on top, so the user did not need to scroll down each time to see the most recent chat. This worked just fine, but then I learned (on Stackoverflow) the neat trick to use some JS to scroll the DIV to the bottom:

function J_scroll2bottom() {
    var objDiv = document.getElementById("chat-content-div");
    objDiv.scrollTop = objDiv.scrollHeight;
}

The chat box area is inside an IFRAME containing the scrolling DIV that is called from the main chat script. This IFRAME script refreshes every 20 seconds. This works great on the initial page call from Safari, Chrome, and Firefox, but the problem is that when the content of the div refreshes after the first 20 seconds elapse, the Safari DIV content is 63 pixels off and will not register the true scrollHeight of 1270 pixels anymore for the content of the DIV and now registers 1207. This leaves exactly one row of chat hidden below the bottom of the DIV. You can still manually scroll the rest of the way, but what I am confused about is why Safari changes the scrollHeight of the DIV after the refresh. The chat content in the DIV itself for testing is static so the content of the DIV is not changing between refreshes. This does not happen in Chrome or Firefox.

Is there any other way to force the scrolling in Safari all the way to the bottom? It's bizarre that if there is additional content in the DIV, which I can scroll to manually, why can't Safari see its corrent height after the refresh?

NOTE: I did take source snapshot of the initial load and refresh page load code to see if somehow the code was changing. They are exactly the same.

Any thoughts? Maybe this is a known bug in Safari?