JQuery toggle/slider flicker in Firefox

Question

Hmmm... I have read about this issue on various other threads here on stackoverflow but am still experiencing the problem on my work in progress (without quite as much exciting jQuery involved)

www.thebeverley.com

Simple toggle that expands fine but flickers on collapse - you will need to scroll down to use the same button to collapse. Seems only in FF 3.5.7 (mac) - works as expected in Safari. Have tried various overflow:hidden permutations on #main id and elswhere, and removed href # completely now in case of some conflict. Still no joy.

Am I missing something or can someone point me in the right direction perhaps?

Many thanks, D

Answer 1

It flickers because assumedly your browser is long enough such that hidden there is no scrollbar but shown there is a scrollbar. Showing that scrollbar reduces the width of the page which will slightly more things to the left to varying degrees.

Answer 2

Not much you can do about it ..

It is an issue with how firefox handles autoscrolling due to the change of the document height ..

The only solution would be to scroll to top right before starting the collapse animation

jQuery('html').scrollTop(0);

Of course this invades on the user experience and it is a choice you have to make ..