#8370 closed bug (fixed)

Opened February 24, 2011 01:28PM UTC

Closed May 31, 2012 10:54PM UTC

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:
Blocked by:		Blocking:

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.

Attachments (0)

Change History (9)

Changed February 24, 2011 03:21PM UTC by rwaldron comment:1

component:	unfiled → effects
priority:	undecided → high
status:	new → open

Confirmed

Changed February 28, 2011 05:30PM UTC by danheberden comment:2

owner:	→ scott_gonzalez
status:	open → assigned

Changed June 04, 2011 04:18PM UTC by Youri comment:3

_comment0:	Replying to [comment:2 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. \ \ Hope this helps in solving the bug, I'm pretty sure this IS the issue. → 1307204422641386
_comment1:	Replying to [comment:2 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. → 1307204474373308

_comment0:

Replying to [comment:2 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. \ \ Hope this helps in solving the bug, I'm pretty sure this IS the issue. → 1307204422641386

_comment1:

Replying to [comment:2 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. → 1307204474373308

Replying to [comment:2 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.

http://www.criticalwarfare.com/boredom/chat/jquerySlideToggleBug.php

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.

Changed June 04, 2011 04:35PM UTC by rwaldron comment:4

#9513 is a duplicate of this ticket.

Changed June 04, 2011 04:35PM UTC by rwaldron comment:5

priority:	high → blocker

http://jsfiddle.net/rwaldron/aWEdc/2/

From latest duplicate

Changed July 12, 2011 03:07PM UTC by john comment:6

resolution:	→ wontfix
status:	assigned → closed

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.

Changed April 23, 2012 04:43PM UTC by rwaldron comment:7

#11612 is a duplicate of this ticket.

Changed May 31, 2012 10:54PM UTC by sindresorhus comment:8

resolution:	wontfix
status:	closed → reopened

This was fixed in 1.8

Changed May 31, 2012 10:54PM UTC by sindresorhus comment:9

resolution:	→ fixed
status:	reopened → closed

Side navigation