Why do IE/Chrome initially give incorrect clientHeight and scrollHeight for a textarea?

Question

Chrome (and IE when browsing local files) gives an initial value for the clientHeight of a textarea element that is incorrect. How do I get IE and Chrome to give the correct values? (Problem demo'ed here)

I am setting the position and size of the textarea via CSS fixed/absolute positioning. Then I am checking the value of clientHeight via JavaScript/jQuery.

The problem does not happen all the time, but is consistently reproducible. Specifically, the following conditions are required:

1. Using Chrome (5.0). (Also IE (8.0) if the file is opened from the local computer.)
2. Browser window is maximized.
3. jQuery is included inline (vs. linked as an external file)
4. The page has not been loaded since the browser was started.
5. My app has not processed any commands, yet.
6. The variable paddingLines is dynamically determined based on clientHeight. (Setting to 50 every time is a work-around.)

I need accurate clientHeight and scrollHeight values because I use these properties to determine where to 'snap' the textarea scrollHeight to so the last output starts on the first line of the text area. Actually, if the properties were consistently inaccurate between calls it would still work. Unfortunately, the inaccurate properties are adjusted to their correct values by the time the first command is processed.

I have tried to isolate the problem in a demo here. When I tried to make an even simpler sample, the problem did not reproduce as consistently. I think there are some timing and/or browser optimization issues because the following work-arounds make the problem go away:

1. Setting the variable paddingLines to 50 every time (instead of dynamically calculating it based on clientHeight)
2. Including jQuery as an external file (instead of inline)
3. Adding a short delay (as short as 2 milliseconds) before the textarea is initialized.
4. Loading the app in IE from a server (vs. opening from the local computer)

However, these work-arounds are only kludges and I would prefer to find the true cause/solution to the problem. Although this is a minor aesthetic problem, I wish to gain a deeper understanding of how the Html DOM, CSS, Javascript, and jQuery work in different browsers. Is there something wrong with my code?

Notes:

• The causes for Chrome's inaccurate properties seem to be different than IE's
• Chrome's innaccurate clientHeight seems to be based on the non-maximized size of the browser.
• IE's innacurate clientHeight may be affected by the info bar warning about unsafe scripts.

Answer 1

Have a look at the answer to these two questions.

http://stackoverflow.com/questions/3288397/getting-height-and-width-of-body-or-window-of-web-page

http://stackoverflow.com/questions/3282679/clientheight-returns-defferent-values-depending-on-the-mode-ie8-is-in

Hope it helps.

Answer 2

I never figured out the root cause, but I found an acceptable workaround that doesn't depend on pausing a magic number of milliseconds:

Handle the resize event. This event is triggered when the browser opens for the very first time, even if the user did not manually resize the window. The values of clientHeight and scrollHeight have settled in all browsers by this point.

$(window).resize(function(e) {
    // Called when the browser is first opened.
    // Values of clientHeight and scrollHeight have settled by this point.
});