Element flickers before disappearing when hidden with .animate({width: 'hide'}), but only on Chrome

Question

This problem appears on Chrome/Chromium (on Linux and Windows): when I use JQuery to hide an element with .animate({width: 'hide'}) , the element shrinks, then for a fraction of second goes back to it's original size, then disappears instantly.

I made a fiddle: http://jsfiddle.net/FyDWE/4/

On IE9 and Firefox everything works as expected.

Thanks in advance!

Answer 1

I wasn't able to come with a workaround (in the case that you must use width: 'hide' ) but I was able to locate what seems to me be a very strange browser bug when I edited the jQuery fx core to return at the flicker point.

Here is the jsfiddle:

http://jsfiddle.net/FyDWE/9/

When you leave mouse, the animation will start to shrink, and it suddenly resizes to full when it reaches it's end. Now this is your flicker source and it stops there because of the jQuery edit.

If you now edit the style attribute of the .options span element that was being animated you can see it has display: inline-block; overflow-x: hidden; overflow-y: hidden; width: 0px; display: inline-block; overflow-x: hidden; overflow-y: hidden; width: 0px;

Now if you change the width to 1px , ( display: inline-block; overflow-x: hidden; overflow-y: hidden; width: 1px; ) it will suddenly completely shrink.

So I think the flicker comes from this: the animation reaches 0px which means sudden fullresize in chrome as shown in the above jsfiddle, and then the element hides. When you try the linked jsfiddle in IE9, the flicker freeze state is normal even with width: 0px there is no black bar like there is in chrome.

edit:

Here's my workaround for the bug in case solution not using width: 'hide' is feasible:

http://jsfiddle.net/FyDWE/10/