JQuery: Flicker problem on Firefox with fadeOut and fadeIn

It has been a bloody nuisance getting the fadeIn and fadeOut to work properly on Firefox. I’ve been trying to get the content on the page to fade out, load new content and fade it in when the user clicks the navigation menu. But everytime I do that, there’s a flicker on the page that simply bugs the hell out of me.

After googling for half a day, I finally found out the reason. And it is not very straightforward, especially for someone getting into web design after a 6 year hiatus. Here’s what the problem is – Firefox gives you a vertical scrollbar on the side as long as you have content that extends beyond the vertical visual boundaries of your screen. But it doesn’t keep it there all the time. If the content can fit on your screen, it disappears. This causes the scroll bar to disappear when it’s not needed thereby making your layout move to the right because of the extra space.

Now apparently, there is some way to get the scroll bar to persist, but I couldn’t get it to work without having a double vertical scroll bar on the side. A number of options are available on this page, mainly in the comments, but none of them did the trick for me (I’m using Firefox 4).

So, back to googling and this time I came across this issue on the jquery website which says that fadeOut sets the display property to none and this causes an issue with the layout. More searching finally led to this mail chain in which one of the users suggests not to use fadeOut and fadeIn but rather just use animate() and that will solve the issue with the display:none. And it actually did. The annoying flicker is gone. Effectively, instead of using

$obj.fadeOut(‘slow’, function(){

$obj.fadeIn(‘slow’);

});

use:

$obj.animate({opacity:0}, ‘slow’, function(){

$obj.animate({opacity:1},’slow’);

});

and no more flickers! :)

 

Update: If you’d like to see a working POC, you can download the source here. It should work fine even with Javascript disabled.

4 thoughts on “JQuery: Flicker problem on Firefox with fadeOut and fadeIn

  1. Hey,

    thanks so far! Have the same problem. It´s working perfectly in Chrome / Safari. In Firefox it works but with a flicker. I tried your solution it also works but i still have the same flicker :(
    Any suggestions? That`s what I used:

    $(‘body’).animate({opacity:0}, 0,function(){
    $(‘body’).animate({opacity:1},1200);
    });

    Thanks in advance,
    Vinzent

  2. Hi Vinzent,

    Sorry, I sort of abruptly stopped working in JQuery, so I might not be able to help you out with this too much. But I would advise you to try it in another OS with firefox and see if the flicker persists. I just revisited my old code and tried it again with the latest updated firefox in Debian and it works fine, no flicker. If you like, you can download the POC from here:

    https://docs.google.com/leaf?id=0B0UFwjUvotu2MDYyOWY4NGQtYzIwNC00YTI0LWI5OTktYTBlNzE0YjdkZjZk&sort=name&layout=list&num=50

    Just unzip it and open index.html. The POC should work even with Javascript disabled. Hope this helps.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s