jQuery slideToggle and Internet Explorer
Just noticed something quirky today regarding jQuery’s slideToggle effect in Internet Explorer versions 6 and 7. (I’m guessing the use of jQuery’s slideDown and slideUp will give you the same problem.) I’ve been creating some nice sliding div effects these past couple of weeks in work and wondering why the slide animation in IE6+ was so jagged and clunky, while Firefox and Safari rendered it perfectly. Through the process of elimination and some hair loss, I figured it out.
The fix:
Be sure that whatever it is you’re sliding (usually a div) doesn’t have any associated CSS attribute position declared. It doesn’t matter if it’s position: relative or position: absolute, or if this styling is applied to the sliding element or to a child of the sliding element; just rip it out of there.
Do that and your slideToggle should look all smooth in every browser.
September 26th, 2007 at 5:12 pm
seems to be one of the golden rules of JQuery…. if something isnt behaving as it should, strip off the position attributes around it and build it back up again correctly. I spent 2 hours the other day trying to pick something apart and it turned out that it was because i had assigned position relative to it…. painful!
September 26th, 2007 at 5:33 pm
Floats are my new best friend. I don’t find it as quick and easy to position stuff with floats, but it seems like the best way to avoid the cross-browser issues. Damn you, IE!
September 26th, 2007 at 5:50 pm
I find safari worse than IE these days…. I’d love to smack it!
September 27th, 2007 at 9:52 am
Safari is a beautiful and unique snowflake.
September 27th, 2007 at 8:19 pm
Damn right Jason, it melts next to Firefox.
October 9th, 2007 at 1:54 am
[…] Niall Doherty » Blog » Blog Archive » jQuery slideToggle and Internet Explorer need to try this, I’m tired of my elements jumping around like Tom Cruise (tags: javascript webdev jquery) […]
January 23rd, 2008 at 3:07 pm
One thing that also might help: give a height of 101% in CSS to all block-level-elements involved!
This solved my problems with jquery-slideUp/slideDown and IE.
May 20th, 2008 at 5:45 pm
Johannes Lietz, thank you so much! I tried the 101% tweak and now it works! Otherwise I’d commit a suicide, i think (wasted so much time trying to guess what that fripping IE wanted)
September 12th, 2008 at 4:52 pm
Confirmed: 101% tweak helped me with slide-down problems in IE as well. I’m using slideDown on a UL, and IE was producing more of a slide-in-from-the-left effect instead. Nice
September 17th, 2008 at 5:18 am
Hi All,
What a great tool, eh?
We’ve been customizing it a bit, and for our first post on “How To’s” with this tool, feel free to check out how we added a timed automatic rotation here:
http://eliasinteractive.com/blog/making-it-happen-coda-slider/
Thanks to all involved on this!
- Lee Taylor
September 29th, 2008 at 5:12 pm
Hey, i have tried the 101% hack, but didnt work yet, take a look http://www.chazzuka.com/experiments/ajaxpage/
November 18th, 2008 at 11:43 am
Anybody know how to implement a slider inside a slideToggle?
It needs position: absolute; to work so i can’t use float instead.
March 5th, 2009 at 6:31 pm
Wow, thank you so much for this. Sure enough, I had a position: relative on my divs. I was prepared to spend the next 3 hours trying to figure out why IE sucked, but I found this on google on my first shot! Thanks!!!
March 19th, 2009 at 5:44 pm
The no-position tweak works but I the position:relative was mandatory in my case, so the 101% tweak was the good one.
Thank you so much for this, ie was driving me crazy !
March 19th, 2009 at 5:48 pm
Some precisions : in my case the problem is with slideUp() or slideDown() on a div containing an image, and only under ie6. The animation is smooth but the image simply disapears at the end of the slide !
April 4th, 2009 at 2:14 pm
Thanks! The “height:101%” fixed my adsense on IE moving to the left and jumping around!
IE needs to be made illegal.
April 30th, 2009 at 8:53 pm
Just as an addition to this post, I’ve found that slideToggle + IE + Table elements do not prove to be smooth as well. It will toggle, but in a purely on/closed format. I had to wrap it in divs to get the nice transition. Probably because of the nested elements, but it works fine in everything else (FF+ Safari).
June 17th, 2009 at 11:07 am
Good post, there seems to be a bug with slideToggle + IE + positioned elements. One can either use the 101% height or toggle instead of slideToggle.