CSS3 hover effects make weird impact on other elements in Chrome

Question

I have just styled one of my images with this CSS3 hover effect: http://tympanus.net/Tutorials/OriginalHoverEffects/index2.html

The problem is that in Chrome some of the other elements on the page are affected by this hover effect it seems. For instance, when I hover the image my top menu item links are moved 5px to the right and back again when the hover effect ends. Also a couple of block quote elements are affected this way. It´s as if some of these other elements are given a "padding" value by the CSS3 transition effect in some strange way..

I see none of these problems in IE and Firefox, so this problem is only in Chrome it seems.

Have any of you experienced anything similar to this before?

Answer 1

I just had to apply: -webkit-backface-visibility: hidden; to all the affected elements and everything works well in Chrome.