CODEWITHSUNDEEP
javascriptjquery
go minimal
go minimal

Reputation: 1703

How do you fix the flickering that occurs when you use slideToggle in jQuery?

I have a simple unordered list that I want to show and hide on click using the jQuery slideUp and slideDown effect. Everything seems to work fine, however in IE6 the list will slide up, flicker for a split second, and then disappear.

Does anyone know of a fix for this?

Thanks!

Upvotes: 12

Views: 26360

Answers (10)

saeraphin
saeraphin

Reputation: 21

Dunno if someone will read this answer, but here is a workaround for those who, like me, can't add a document type to the page (thank you Sharepoint 2007 default templates) without spending a few days on a complete template revision.

On a DOCTYPE-less document, the flickering occurs when an element height reaches 0. So the workaround I've found is to animate my elements to an height of 1px, rather than 0.

Like this:

$(".slider").click(function (e) {
   $(this).animate({"height" : "1px"});
});

Hope it will help.

N.B: don't forget that in order to slideDown the element, you have to previously store its initial height somehow (node property, rel attribute hack, etc).

Upvotes: 2

Kees C. Bakker
Kees C. Bakker

Reputation: 33381

We had the same problem today. Not only in IE6, but also in IE8! I've fixed it by hiding the div somewhat earlier, by using a timeout:

var pane = $('.ColorPane');
var speed = 500;
window.setTimeout(function() { pane.css('display', 'none'); }, speed - 100);
pane.slideUp(speed);

Hope it helps some of you out there.

Upvotes: 1

ghusse
ghusse

Reputation: 3210

This code does not depends on the browser (no browser detection), works great and reproduces the behaviour of the method .slideUp

$("#element").animate({
     height: 1,          // Avoiding sliding to 0px (flash on IE)
     paddingTop: "hide",
     paddingBottom: "hide"
     })
     // Then hide
     .animate({display:"hide"},{queue:true});

Upvotes: 2

Benxamin
Benxamin

Reputation: 4820

I'm working with a carousel that has marked-up copy over some background slides. The slide transition is a fade. Everything's fine so far.

But some parts of the copy fade-in after the slide loads. And then fade-out right before the slide transition. This copy, an unordered list of links (UL > LI*2 > A), faded-in over the slide background. This, too, is fine in every browser except IE. IE had a flickering background on the UL.

What was happening is that there were two simultaneous fade-Ins running: the background image on the slide & the UL. I used sergio's prototyping setTimeout function to run the UL fadeIn() after the slide had completed loading. Then, I called another setTimeout to make the slide transition right after the UL fadeOut().

setTimeout is your friend when combating IE flicker.

Upvotes: 1

sergiopereira
sergiopereira

Reputation: 2056

From what I've heard and tried (including the other suggestions here) there are still situations where the flicker will continue to be noticeable, especially when you don't have the choice of easily leaving quirks mode. In my case I had to stay on quirks mode for now and the other suggestions still didn't fix the problem for me. I ended up adding a little workaround until we can finally leave quirks mode:

//Start the slideUp effect lasting 500ms
$('#element').slideUp(500);

//Abort the effect just before it finishes and force hide()
//I had to play with the timeout interval until I found one that
// looked exactly right. 400ms worked for me.
setTimeout(function() {
    $('#element').stop(true, true).hide(); 
}, 400);

Upvotes: 2

user141621
user141621

Reputation:

I posted a quick fix solution over at http://blog.clintonbeattie.com/how-to-solve-the-jquery-flickering-content-problem/

In short, add overflow:hidden to the containing element that you are sliding in/out. Hope this helps!

Upvotes: 0

Mike Gardiner
Mike Gardiner

Reputation: 706

Apologies for the extra comment (I can't upvote or comment on Pavel's answer), but adding a DOCTYPE fixed this issue for me, and the slideUp/Down/Toggle effects now work correctly in IE7.

See A List Apart for more information on DOCTYPES, or you can try specifying the fairly lenient 4/Transitional:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Upvotes: 22

Pavel Lishin
Pavel Lishin

Reputation: 129

Oli's fix only seems to apply to flickering backgrounds, which is not the case here.

Ryan McGeary's advice is solid, except for when the client/your boss absolutely demand that IE6 not act like it has fetal alcohol syndrome.

I found the solution here: Slide effect bugs in IE 6 and 7 since version 1.1.3

Added a doctype declaration to the top of the file (why wasn't it there before? who knows!) and the flicker vanished, never to be seen again.

Upvotes: 2

Ryan McGeary
Ryan McGeary

Reputation: 239885

Just let IE6 flicker. I don't think it's worth it to invest time in a dying browser when your base functionality works well enough. If you're worried about flickering for accessibility reasons, just sniff for IE6 and replace the animation with a generic show() and hide() instead. I recommend avoiding complicated code for edge cases that don't matter.

Upvotes: 10

Oli
Oli

Reputation: 239810

$(document).ready(function() {
    // Fix background image caching problem
    if (jQuery.browser.msie) {
        try { 
            document.execCommand("BackgroundImageCache", false, true); 
        } catch(err) {}
    }
};

Apparently.

Upvotes: 9

Related Questions