Question

I noticed that a standard :hover on images, which are displayed with an unoriginal width value, will lead to a slight wobbling animation when the mouseover takes effect. I assume this is due to some pixel rounding taking place, but why is the image displayed different when hovered?

Please refer to my test case on http://jsfiddle.net/z29LM/8/

Notice that the first two images are fine when hovered (because they use the original image width/height), but all the others seem to add like 1 pixel to the right and the bottom. It does not seem to matter which kind of hover effect is applied (background-color will lead to the same problem, for example).

So the workaround seems to be to open up Gimp and adjust the images to the target width/height manually, or is there a html/css fix for this phenomenon?

edit:
So this seems to be a Firefox-only bug (using 13.0.1). The link posted in the answer suggests a quick fix by adding box-shadow: #000 0em 0em 0em; to the image element. See http://jsfiddle.net/z29LM/9/ for a fixed/working version.

Answer 1

It’s a bug with Firefox (it was initially fixed once upon a time, but re-emerged after FF10).

My sage advice? Keep the browser-resizing at a minimum.