CSS3 Opacity Transition Image Wiggle Bug in Mozilla Firefox

I recently came across an annoying problem in Firefox when developing a website. A CSS Opacity change applied to an image on mouse hover was causing the image to scale down in size horizontally by 1 pixel.

This would happen on hover, the transition of opacity would then occur over half a second to change opacity of the image at which point the image would scale back up to the normal size. And vice versa on moving the mouse off the image. Creating a noticeable and very annoying wiggle of the image.

I tried Googling for an answer and there weren’t many posts out there about this issue. But I did come across the answer in a post that mainly relates to 3D transformations with the CSS3 backface-visibility property.

http://css-tricks.com/almanac/properties/b/backface-visibility/

You have to apply the ‘-moz-backface-visibility: hidden;’ property to both the link state of the image and the hover state.

Hopefully this helps anybody else who comes up against the same problem.