Skip to main content

Bug Tracker

Side navigation

#14685 closed bug (notabug)

Opened January 10, 2014 12:30AM UTC

Closed January 20, 2014 11:29PM UTC

.height() inconsistencies with hidden elements

Reported by: ult_combo Owned by:
Priority: undecided Milestone: None
Component: unfiled Version: 1.10.2
Keywords: Cc:
Blocked by: Blocking:
Description

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.

Attachments (0)
Change History (3)

Changed January 10, 2014 12:41AM UTC by dmethvin comment:1

Asking for the height or width of something that isn't currently visible is dicey. The trick of swapping out the display property seemed really boss at the time but in retrospect was a mistake. So I'd prefer we just document that getting dimensions of hidden elements can be flakey and leave it at that.

Changed January 10, 2014 12:43AM UTC by ult_combo comment:2

@dmethvin I agree, updating docs is a viable option too.

Changed January 20, 2014 11:29PM UTC by dmethvin comment:3

resolution: → notabug
status: newclosed