Bug Tracker

Modify

Ticket #2185 (closed bug: fixed)

Opened 6 years ago

Last modified 2 years ago

animate does not work properly with non-block-level elements (table, tr, td, inline, etc.)

Reported by: Johnath Owned by: snover
Priority: high Milestone: 1.4.3
Component: effects Version: 1.4.2
Keywords: Cc: snover
Blocking: Blocked by:

Description

Using slideToggle to hide/show a div styled with

display: inline-block;

Causes the display to go to "none" when hidden, and then "block" when restored. Ideally, the display should be set back to its original value.

It's simple to workaround by wrapping the styled div(s) in a normal block div, but obviously that's suboptimal. Obviously, testing this requires a browser that understands inline-block. I am seeing this behaviour in the Firefox 3 betas.

Change History

comment:1 Changed 6 years ago by michaeltsmit

Just to clarify, this bug is also reproducible with slideUp and slideDown. show() & hide() don't reproduce the error. Further, this error also occurs for items with displays other than display: inline... table rows go from display: table-row to display: none (on hide) to display: block (on show again). Seems the patch would be either be for an option to add the display parameter or for jQuery to somehow remember the proper display type.

comment:2 Changed 6 years ago by josephtate

I can confirm the same behavior that michaeltsmith85 is seeing. An inline css style of "display:none" set for a <tr> is being set with slideToggle to "display:block" which borks the table. It should be set to "table-row". I would opt for/maybe prefer setting the display parameter myself as it seems it could be complicated for jQuery to determine what sort of element needs what sort of display type.

comment:3 Changed 5 years ago by dmethvin

Duplicate bugs #2503 and #4096 have more discussion.

comment:4 Changed 5 years ago by dotnetCarpenter

Seems that there is two issues here.

  • 1) height and width animations are always set to display: block
  • 2) not all animations revert display back to the original

In jQuery.fx.update we need to check for inline-block or table-row.

// Set display property to block for height/width animations
if ( ( this.prop == "height" || this.prop == "width" ) && this.elem.style )
  this.elem.style.display = "block";

line 4022-4024 in jQuery 1.3.2
The second issue is solved in jQuery.fx.animate.

if ( ( p == "height" || p == "width" ) && this.style ) {
  // Store display property
  opt.display = jQuery.css(this, "display");

line 3878-3880 in jQuery 1.3.2

comment:5 Changed 5 years ago by dotnetCarpenter

comment:8 Changed 4 years ago by dmethvin

Closed dups #4458 and #5487 .

comment:10 Changed 4 years ago by yehuda

  • Status changed from new to closed
  • Resolution set to worksforme

This was fixed a while back and there are tests for it.

comment:12 Changed 4 years ago by esteluk

  • Status changed from closed to reopened
  • Resolution worksforme deleted

Is this genuinely fixed? My test case at  http://estel.uwcs.co.uk/jquery/inlineblock.html still shows this issue to persist, and it's fixed by an amalgamation of fixes in this and #2503.

comment:13 Changed 4 years ago by snover

  • Status changed from reopened to new
  • Cc snover added
  • Priority changed from minor to high
  • Owner set to snover
  • Version changed from 1.2.2 to 1.4.2
  • Milestone changed from 1.2.3 to 1.4.3
  • need changed from Review to Patch

No, this is not fixed. I have a patch that I am going to try to get landed for 1.4.3 or 1.next.

Bugs #7110, #6999, #6791, #6736, #6311, #6036, #5372, #5194, #5157, #5047, #4535, and #2580 are duplicates of this bug.

comment:14 Changed 4 years ago by snover

  • Status changed from new to assigned
  • Summary changed from slideToggle doesn't preserve "display" style to animate does not work properly with non-block-level elements (table, tr, td, inline, etc.)

comment:15 Changed 4 years ago by snover

  • need changed from Patch to Commit

comment:16 Changed 4 years ago by john

  • Status changed from assigned to closed
  • Resolution set to fixed

comment:17 Changed 3 years ago by snover

#4908 is a duplicate of this ticket.

Please follow the  bug reporting guidlines and use  jsFiddle when providing test cases and demonstrations instead of pasting the code in the ticket.

View

Add a comment

Modify Ticket

Action
as closed
Author


E-mail address and user name can be saved in the Preferences.

 
Note: See TracTickets for help on using tickets.