Hover + backgroundColor animation fails to update viewport in IE8

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.