I’m currently working on a tool that has a tabbed section that toggles width to max and zero when a tab is clicked. The whole div that contains the tab and the section is fixed and positioned to the top right of the window. It’s 95% there, but has an intermittent flicker that occurs when the expanded section has it’s width toggled down to zero using the $.animate({width: "toggle"}); method. Any ideas on what might be causing it?
Here it is in a fiddle – http://jsfiddle.net/Tgdrb. I tried to simplify it as best I could so that it still showed the problem but wasn’t totally out of context from how it would actually look on a page. I’m also tagging this as a CSS question, as I wonder if it is the way I’ve structured my CSS that is causing the problem (I would not be surprised if it is).
Thanks guys!
In case anyone is curious, there is a way to do this that is pure CSS3. It won’t work in IE (yet), but it gracefully degrades, so it works rather nicely.
Fiddle here: http://jsfiddle.net/Tgdrb/17/
So yeah, the answer to this: Chrome causes a redraw. If you don’t like the effect, find a better way to do what you want to do.