So I was working on a lovely little retro furniture site earlier today, adding a few animation and transition niceties with jQuery and found something a bit weird.

When animating the opacity of an image, the image size would also change by one or two pixels, appearing to flicker between sizes and ruining the subtle effect I was going for.

$('.product-list a').hover(function() {
    $(this).find('img').stop(true,true).animate({opacity: 1}, 900);
});

In IE11 and Chrome there were no issues at all, but Firefox (my preference for web development) wasn’t behaving.

All the images were 150px wide and I was scaling them down to 142px with CSS by way of the usual ‘max-width:100%’. I tried expressly defining the 142px size but it didn’t help.

It was a really weird little glitch and it shouldn’t be surprising that the fix was equally weird; define a background colour for the image.

.product-list a img {
    opacity:0.82;
    background-color:#ffffff;
}

Problem solved. Bizarre.

// Matt