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.
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!
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!
I find safari worse than IE these days…. I’d love to smack it!
Safari is a beautiful and unique snowflake.
Damn right Jason, it melts next to Firefox.
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.
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)
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
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
Hey, i have tried the 101% hack, but didnt work yet, take a look http://www.chazzuka.com/experiments/ajaxpage/
Anybody know how to implement a slider inside a slideToggle?
It needs position: absolute; to work so i can’t use float instead.
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!!!
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 !
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 !
Thanks! The “height:101%” fixed my adsense on IE moving to the left and jumping around!
IE needs to be made illegal.
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).
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.
Positioning? Just rip it out of there ? Let’s just get rid of all tags too…. This is a ridiculous workaround as absolute positioning is a must have when working with like, anything……. point is – slideToggle sucks. putting in a workaround, that hacks child elements is sinful….. this is not a workaround.
Kevin, thanks for the comment. It might not be an ideal workaround, but it’s the only one I’m aware of. By all means, using something other than slideToggle if you prefer.
Also, if you’re using absolute position for everything, you’re doing something wrong. Floats are usually a better way to go.
ahhh yes, only problem is working with radio and checkbox elements within forms – your can’t really do much with float…. thanbsk for replying though…….
I needed to use absolute positioning for one of the nested elements in my div that gets slideToggle’d. So I tried the “height: 101%” hack, but that made the sliding div expand to greater than its content, then snap back to the correct size at the end of the animation. The real issue seems to be that the sliding div needs to have the ever elusive “hasLayout” property triggered in IE. Giving it a “min-height: 1%” worked the best for me without other random oddities cropping up. Hopefully that helps anyone who hasn’t yet figured it out!
I’m using slideToggle to generate an accordion-like menu. My problem was that IE7 was ignoring the height of the slideToggled element. The net result was that absolutely positioned child elements were getting stretched to the height of the viewport.
After trying a bunch of CSS tricks (including those enumerated above) I ended up writing a couple of jQuery functions that calculate the height of the accordion blocks in question based on their content (whether open or closed) and assign hard pixel heights to them on the fly. This seems to have corrected IE7’s aberrant behavior (thank God!).
how bout if I use ul in my code ? I have a task of displaying a brand list. And if it is more than 10 brands to shows, than after 10 brands, it will only have a “more” links. The brands name are on each li element and the last li will be the “more” link. And so I put a display:none from the 11th brand till the last brand. And this flickering problem, does happen,,, could someone help me ?