CSS3 hover effects make weird impact on other elements in Chrome

对着背影说爱祢 提交于 2019-12-12 09:43:34

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!