jQuery fading images with HTML resize makes them move sometimes

Question

I'm having an odd issue in FF10 using jQuery 1.7.1. I have a gallery which may have scaled down images, some of them can be scaled quite a bit from their original dimensions.

What happens is that sometimes, the image will 'zoom' or jump to one side when I try to animate its opacity using jQuery.

For an example, have a look here at one of the small ones, and mouse over it: http://jsfiddle.net/ZUWkh/

It can be very subtle but you can see the image change when the opacity is animated - it only seems to affect images that have been scaled down beyond a certain point, as I can't see it happening to the bigger image on this example.

Any ideas what is happening, and how to overcome it?

I'm scaling them like this just to fit them into rows in the gallery - the sizes are worked out with PHP and are proportional. I could use CSS instead if there's a difference.

Update: The problem changes if you resize the browser window, or zoom in / out - it doesn't get solved but the images that get bumped change, so that some of them are fine afterwards and some that were fine now jump when animated.

Another update: I'm also noticing that this seems to affect antialiasing, as the images that are faded out seem to be 'jaggy', but are smooth when at full opacity. Something new in FF to make images look prettier maybe?

Yet another update: Just tested on Chrome, Safari on Mac and IE7 on XP, this issue ONLY happens on FF10 on Mac (don't know about other platforms or versions). Wierd...

Yet another yet another update: Just tested on XP with FF9, this issue doesn't happen. I then updated this to FF10, and the issue appears. Thinking this might be strong enough for a bug report...

Answer 1

Figured out a fix for this, don't ask me why this works or how but if you style the image with

box-shadow: #000 0em 0em 0em;

this problem magically disappears. Definitely to do with whatever antialiasing firefox does, because with this style applied the image stays antialiased when the opacity is changed.

Aside from this I've no idea why this happened or why this solution works.

Also, tested in IE7/8, safari, chrome etc with no issues.

UPDATE - still seeing this issue, even with this style applied, in Firefox only. Another style that can help sometimes is backface-visibility:hidden; - see this blog post for more info: http://css-tricks.com/almanac/properties/b/backface-visibility/