I'm aware that upon trying to retrieve the .height() of an element, jQuery currently swaps display:none by display:block (source), but it also adds position:absolute as part of the cssShow object, which takes the element out of the normal document flow and thus no longer respect the original line-breaking rules.

This makes a difference when the element's height varies depending on the automatic line-breaking.

See this fiddle with 3 identical elements, where .height() returns a different value for each one.

So, .height() "works" on hidden elements but the returned value is sometimes inconsistent with the height that would be obtained if the given element was being shown (display:block) inside the normal document flow.

Another inconsistency is that even though .height() works on elements with display:none, it will fail when an ancestor of the element has display:none, as the previously linked cssShow $.swap is only applied to the element being measured.

Changing that cssShow $.swap by a .show(), measure, .hide() would be more accurate in my opinion (keeping element in the document flow).

I'm not sure about elements with hidden ancestors. Any change here could cause back-compat issues, maybe add an optional "makeSureElementIsVisible" parameter to recursively display hidden ancestors in the .height()/.width() getter functions.

tl;dr:

• .height() screws line breaking due to absolute positioning and is thus inconsistent on hidden elements;
• .height() works on hidden elements (display:none) but does not work on elements with a hidden ancestor.

I believe this behavior is rather confusing, thus reporting as a bug.

Note: I believe all this also applies to .width() as well, since they share the same getter hook.