问题
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?
回答1:
I just had to apply: -webkit-backface-visibility: hidden; to all the affected elements and everything works well in Chrome.
来源:https://stackoverflow.com/questions/17242922/css3-hover-effects-make-weird-impact-on-other-elements-in-chrome