4

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?

GeniusDesign
  • 499
  • 7
  • 25
  • 1
    doesnt happen to me on Chrome... – stackErr Jun 21 '13 at 19:32
  • does not happen to me either :-/, what version of Chrome and OS are you using? – Ben Thefbfairy Bayard Jun 21 '13 at 19:38
  • 1
    I found the solution on this post: http://stackoverflow.com/questions/14070056/css-rotate-with-transition-seem-to-affect-other-elements-opacity I just had to apply: -webkit-backface-visibility: hidden; to all the affected elements and everything works well in Chrome. – GeniusDesign Jun 21 '13 at 20:09
  • The problem was not on the tympanus.net site, it was on my own site where I have style a particular image with the CSS3 hover effect from tympanus.net. You can see it all works on my test site here: http://www.geniusdesign.dk/Demoer/Tailoredsuits/ - the hover-effect is on the image just below "Inspiration" – GeniusDesign Jun 21 '13 at 20:12

1 Answers1

10

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

GeniusDesign
  • 499
  • 7
  • 25