Bug Tracker

Ticket #8370 (closed bug: fixed)

Opened 4 years ago

Last modified 3 years ago

toggle animation height jumps/snaps when expanding

Reported by: nicasi Owned by: scott_gonzalez
Priority: blocker Milestone: 1.next
Component: effects Version: 1.5
Keywords: Cc:
Blocking: Blocked by:

Description

The toggle() method jumps to it's final height at the end of the expanding animation cycle:

 http://jsfiddle.net/sgdXf/6/

This is also the case if the animate() method is used providing 'height': 'toggle' as can be seen here:

 http://jsfiddle.net/sgdXf/5/

Behaviour occurs on Safari 5.0.2, Firefox 3.6, IE8 and Chrome 9

If you put a width on the element the behaviour disappears.

Change History

comment:1 Changed 4 years ago by rwaldron

  • Priority changed from undecided to high
  • Status changed from new to open
  • Component changed from unfiled to effects

Confirmed

comment:2 follow-up: ↓ 3 Changed 4 years ago by danheberden

  • Owner set to scott_gonzalez
  • Status changed from open to assigned

comment:3 in reply to: ↑ 2 Changed 4 years ago by Youri

Replying to danheberden:

Hey, I've posted a ticket about a very similar problem yesterday, but now I found this ticket, so I will just link to my test page.

The example also shows why the bug happens, and how you can work around it.

Basically, what happens is that jQuery tries to calculate the width, since it's not given in css. However to do so it seems to take the element out of its content. For divs this means that their width gets resized to use whatever space there is.

If you would allow the div to be slided to actually use all this space, you will find that the slide is perfect. Otherwise, it will slide until the maximum height, and consider that the end so it resets the height making the element jump back in its default height.

As an added note, this bug will occur on any jQuery function that tampers with the element's height. In certain conditions it might also be possible to get an incorrect width by the same reason.

Hope this helps in solving the bug, I'm pretty sure this IS the issue.

Version 1, edited 4 years ago by Youri (previous) (next) (diff)

comment:4 Changed 4 years ago by rwaldron

#9513 is a duplicate of this ticket.

comment:5 Changed 4 years ago by rwaldron

  • Priority changed from high to blocker

comment:6 Changed 3 years ago by john

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

Unfortunately there's not really anything that we can do on our end to divine the right height. Setting the width (as previously mentioned) will achieve the correct result - I recommend doing that in your scripts.

comment:7 Changed 3 years ago by rwaldron

#11612 is a duplicate of this ticket.

comment:8 Changed 3 years ago by sindresorhus

  • Status changed from closed to reopened
  • Resolution wontfix deleted

This was fixed in 1.8

comment:9 Changed 3 years ago by sindresorhus

  • Status changed from reopened to closed
  • Resolution set to fixed
Note: See TracTickets for help on using tickets.