CODEWITHSUNDEEP
jquerygoogle-chromeinternet-explorertextarea
Leftium
Leftium

Reputation: 17903

Using jQuery why do IE/Chrome initially give incorrect clientHeight and scrollHeight for a textarea?

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 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 and jQuery work in different browsers. Is there something wrong with my code?

Notes:

Upvotes: 4

Views: 8786

Answers (5)

John Chew
John Chew

Reputation: 318

If you're rendering an object dynamically/responsively depending on the dimensions of its container element, and this is happening in a complicated page environment, then it's unsafe to rely on .load() or .ready() because other code may continue adjusting the size of page elements after the page appears to be loaded/ready. Using a timeout is a bad approach, because you don't know how fast/slow the browser/connection are going to be, so you can't reliably predict how long it will be before your container size stabilizes. I have found that in modern browsers, the best approach is to use a "resize observer" that notifies you when the size of your container element changes. Here's a link to a page that has some good sample code for using resize observers, not specific to this issue.

Upvotes: 0

Parmandeep Chaddha
Parmandeep Chaddha

Reputation: 484

I am using ReactJS and have encountered this problem multiple times. In React specifically, a setTimeOut does the trick. See this answer: https://stackoverflow.com/a/64876916/10554343.

Upvotes: 0

pinguinjkeke
pinguinjkeke

Reputation: 522

I had the same issue. I got the wrong clientHeight with adaptive design. Try to get clientHeight on $(window).load(); instead of $(document).ready();

It worked for me!

Upvotes: 4

Leftium
Leftium

Reputation: 17903

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

Upvotes: 2

Ash Burlaczenko
Ash Burlaczenko

Reputation: 25465

Have a look at the answer to these two questions.

Getting height and width of body or window of web page

clientHeight returns different values depending on the mode IE8 is in

Hope it helps.

Upvotes: 0

Related Questions