I have a small accordion I’m using for a menu for a local A&W francise (Demo: http://awsudbury.fuelmultimedia.ca/menu/ )
When you view it in either Chrome or Safari, you get a flickering that is quite annoying. Does anyone know what is causing this or how to fix it?
I think I can see what’s causing it, haven’t thought of a 100% proper solution yet, but here is a small fix that may at least make it less annoying:
On the .accordionWrapper div, add the styles:
width: 960px;
height: 550px;
This will at the very least stop the flicker from reflowing the entire page.
I think what’s happening here is that at the end of an animation, or during it, the last element gets pushed off and pulled back up as styles are rapidly changing (which causes some repaint events, which are in turn perceived as a flicker).
It may be worth trying to set some different animation options on the accordion, or trying a different accordion altogether if this smaller amount of flicker is still unacceptable.