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 comment:1
Changed January 10, 2014 12:43AM UTC by comment:2
@dmethvin I agree, updating docs is a viable option too.
Changed January 20, 2014 11:29PM UTC by comment:3
resolution: | → notabug |
---|---|
status: | new → closed |
Ported to a docs issue: https://github.com/jquery/api.jquery.com/issues/421
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.