You'd have to be completely anal for this one to bother you. But I am. So it did.

It's hard to describe just how annoying this is to someone who doesn't notice something as small as a one pixel difference. I'll try and give you an analogy.

Imagine every time you pointed the remote at the TV, it moved halfway across the room. Now you start to comprehend my anguish.

By now you realise this is something that you could probably live with, but if you have the ability to do something about it and placate the small percentage of anal visitors to your site, why not?

I only encountered this problem when I was using a CSS transition effect to change the opacity of an image. There was a white background behind the image, so every time the user hovered over it with their mouse, the image became slightly transparent and partially revealed the white background beneath. A nice light effect to give the user some feedback as they move around the page.

But when hovering over the image with the mouse, as the transition effect took place, the image would momentarily shift one pixel to the side before shifting back again. It was very jarring (at least to my eye) so I embarked on a googling quest in an attempt to eradicate the issue.

I found a potential solution on stack overflow (good old faithful) which gave me hope. Another poor soul was describing the same thing I was experiencing. Someone had suggested a fix. Quick! To the code editor!


.your-image {
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1.0, 1.0);
}

I'm delighted to say this little beauty did the trick. No longer did my face involuntarily twitch every time I moved my cursor near an image. I could sleep soundly once more. I hope this helps you at some point in your life, and you don't have to go through the stress, trauma and mental hardship I endured for all of fifteen minutes.