Hover + backgroundColor animation fails to update viewport in IE8

[Kanuck]

I am using animate() to change a background colour. Here is the relevant snippet:

.hover(function() {
	$(this).find("a")
		.stop().animate({'backgroundColor' : '#DCDDDF'}, 100);
}, function() {
	$(this).find("a")
		.stop().animate({'backgroundColor' : '#F2F2F3'}, 250);
})

Unfortunately, in IE8—and only IE8—the effect does not work.

The value of background-color is being changed in the DOM, but the viewport isn't being updated; as soon as any other animation effect kicks in, the viewport updates.

I think the bug is in the UI effects core because changing backgroundColor to, say, opacity eliminates the issue. Animating opacity is handled by jQuery natively, whereas animating backgroundColor is handled by jQuery UI.

I've found a workaround that might shine some light on an eventual fix: chaining .fadeTo(1, 1) in front of the first stop() gives the renderer the kick in the pants it needs to work correctly. I expect it's causing core jQuery to do something necessary that jQuery UI is failing to do.

IE8 affected. IE7 mode, IE7, IE6, Safari, Firefox, Chrome all immune.

[Kanuck]

Ah yes, I almost forgot to mention: changing .hover() to .click() also eliminates the problem, so it seems to be something particular to the interaction between hover() and animate().

[Corey Frang]

​http://jsfiddle.net/gnarf/vK3bA/ I used this url to test and did not see this bug in IE8... Do you have a different test case, or is this bug not affecting 1.8.9?

[trac-o-bot]

Because we get so many tickets, we often need to return them to the initial reporter for more information. If that person does not reply within 14 days, the ticket will automatically be closed, and that has happened in this case. If you still are interested in pursuing this issue, feel free to add a comment with the requested information and we will be happy to reopen the ticket if it is still valid. Thanks!