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?

Answer 1

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.

Answer 2

here is a useful comment from bootstrap team:

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