Does getting the offsetHeight of an element have a side effect?

Question

In the code for Bootstrap collapse, in the hide() method, I see the following line:

this.$element[dimension](this.$element[dimension]())[0].offsetHeight

I don't understand what the point of the .offsetHeight at the end is unless it has a side effect, because it's not being assigned to anything. Does it have a side effect?

score 6 · Accepted Answer · edited May 23 '17 at 10:26

6

Some old browsers like old versions of IE had the problem of sometimes not reflowing (re-rendering the presentation) after you performed some actions.

Mearly querying some properties like offsetHeight forces the DOM to recalculate and redraw the objects on the screen.

So, the side effect is forcing a reflow (redraw) of the screen. Quirky, but an old trick for old browsers.

Here is a question where this is suggested as a solution for an old version of Google Chrome where it did not work properly without it.

edited May 23 '17 at 10:26

Community

1
1

answered Jun 26 '15 at 16:39

Benjamin Gruenbaum

270,886
87
504
504

1

In fact, some of the other instances have this noted in a comment: `if (doAnimate) this.$backdrop[0].offsetWidth // force reflow` – Dark Falcon Jun 26 '15 at 16:40
2

Not only "Some old browsers" but all of them. You cannot get valid offsetHeight without ensuring that rendering tree is up to date. – c-smile Jun 26 '15 at 16:42

score 2 · Answer 2 · answered Jun 26 '15 at 16:43

2

here is a useful comment from bootstrap team:

if (doAnimate) this.$backdrop[0].offsetWidth // force reflow

answered Jun 26 '15 at 16:43

Santiago Hernández

5,438
2
26
34

Does getting the offsetHeight of an element have a side effect?

2 Answers2