Question

I have a <ul> list that is a little bit long. When you expand (slide down) that list elements, the browser does NOT scroll down and everything’s alright. When you contract (slide up) that list of elements, the browser scrolls up will flash/blink A lot while doing so.

• This doesn’t happen on MAC Firefox.
• Neither on Windows (at least the versions I could test)
• This occurs severely on Firefox Linux (ubuntu).

Does anyone had this issue before? If so, what can we do to solve it?

Here’s a code sample for better understanding:

$('#btCatA').click(function() {
    $('#btCatA').toggleClass('selec');
    $('#listcatA').slideToggle('slow', function() {
        // ...
    });
});

Answer 1

You could probably prevent this by decreasing the scrollTop property of the window object by the height of that element before you slide up your list elements. jQuery has a method for that: .scrollTop(). You could animate that, too so that it looks a bit less hasty. The following (untested) code should do the trick:

var toggleClass = 'selec';

$('#btCatA').click(function() {
    var target = $(this),
        listElement = $('#listcatA');

    if (target.hasClass(toggleClass)) {
        target.removeClass(toggleClass);
        $(window).animate({
            scrollTop: '-='+listElement.height()+'px'
        }, 'slow', function () {
            listElement.slideUp('slow');
        });
    } else {
        target.addClass(toggleClass);
        listElement.slideDown('slow');
    }
});