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