Side navigation
#14824 closed bug (fixed)
Opened February 20, 2014 07:17PM UTC
Closed April 30, 2014 01:15PM UTC
jQuery v1.11 and v2.1 slideUp and slideDown not respecting css display property on non-block elements
Reported by: | jason.frank@cadre5.com | Owned by: | |
---|---|---|---|
Priority: | high | Milestone: | 1.11.1/2.1.1 |
Component: | effects | Version: | 1.11.0 |
Keywords: | Cc: | ||
Blocked by: | Blocking: |
Description
I noticed that after upgrading from jQuery version 1.9 to version 1.11 that the behavior of methods like slideUp
, slideDown
, and slideToggle
has changed when applied to non-block elements (i.e., span
) which have a css display
value specified. In the previous versions, such as v1.9, the display
value would get set (after its animation had completed) **to whatever we specifed in our CSS definition**. In version 1.11 and 2.1, the display
value is not respected in this way (at least not for non-block elements).
**Is this a new bug in jQuery 1.11 and 2.1?** I saw that in older versions of jQuery, other people reported similar problems, such as this and this. Those problems seem to have been reported as fixed, and in our experience with jQuery 1.9, that seemed to be the case. But it seems like its broken again in 1.11 and 2.1. Here is a simple reproducible example:
HTML:
<span class="b">block</span> <!-- notice this is not a block-level element... --> <a href="#" class="toggle">toggle it</a>
CSS:
.b { display:block; /* ... but I need it to display like a block-level element */ background:red; }
Javascript:
var isExpanded = true; $(".toggle").bind("click", function(){ if(isExpanded) { $(".b").slideUp(); isExpanded = false; } else { $(".b").slideDown(); isExpanded = true; } });
See it working in this jsFiddle example, which uses jQuery 1.9.
This produces the expected result when toggled open:
[[Image(http://i.stack.imgur.com/MwEiS.png)]]
Unfortunately, jQuery version 1.11 (or 2.1) is not respecting our display
value, instead setting it to inline-block
:
[[Image(http://i.stack.imgur.com/Zcqym.png)]]
This can be seen in this jsFiddle example, where the only thing changed is the jQuery version.
Did I miss a statement from jQuery telling us that this behavior would be different in this new version? These release notes didn't seem to say anything as such, indicating that with this upgrade... "Your code shouldn’t break, it should just run a little faster." But I may have missed a statement somewhere.
Thank you for your help.
Note: I realize that changing the span
in this contrived example to a div
may solve this problem, but there are times when we need to use a span
that is given block-level style (i.e., you can't nest a div
inside of a span
), and we have a large production application with many such cases.
Attachments (0)
Change History (3)
Changed April 08, 2014 04:19PM UTC by comment:1
Changed April 10, 2014 03:44PM UTC by comment:2
component: | unfiled → effects |
---|---|
milestone: | None → 1.11.1/2.1.1 |
priority: | undecided → high |
status: | new → open |
Yes, confirmed.
Changed April 30, 2014 01:15PM UTC by comment:3
resolution: | → fixed |
---|---|
status: | open → closed |
Effects: Respect display value on inline elements
Take "olddisplay" value into the account
Fixes #14824
Closes gh-1566
Ref 73fe17299a840a8a7f3ffffcac15e32a88bd3d66
Changeset: c34dbf5a8d135e0f873ab7a76d1c8f8e316f31e4
Is there any update regarding this issue?