My images is moving/bad pixel when mouse hover

HTML & CSS
1

Hi

I have this website: http://oliver.kaspertoxvig.dk/
But when you try to hover over an image at the frontpage, you can see that pixels move inside the image. Why does this happen?

The same if you hover over the cart in the right corner (then the logo move).

It do not happen when I remove:

transition: opacity .20s ease-in-out;
-moz-transition: opacity .20s ease-in-out;
-webkit-transition: opacity .20s ease-in-out;
}
But I was wondering if there is a solution, so I still can use the ease-in-out effect, cause normally it works fine with ease-in-out.

2

Hi toxen! Your site is getting a PHP error at the moment.

3

Sorry it works now :slight_smile:

4

OK, I can’t see a problem in Chrome. Could you explain in more detail what’s going wrong, and what browser you are using?

5

Hi,

There’s a bug in Firefox with a pixel jog on transition/opacity when the image dimensions have been altered from the normal size.

You can try this fix which should fix the issue.


ul.products li.product img,
ul.products li.product img:hover{
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility:    hidden;
  backface-visibility:     hidden;
}