CSS3悬停效果会对Chrome中的其他元素造成奇怪的影响 [英] CSS3 hover effects make weird impact on other elements in Chrome

问题描述

我刚刚使用CSS3悬停效果设计了一张图片：
http ：//tympanus.net/Tutorials/OriginalHoverEffects/index2.html

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

问题是，在Chrome中，页面上的其他元素会受到影响这似乎悬停效果。
例如，当我悬停图像时，当悬停效果结束时，我的顶层菜单项链接向右移动5px，然后再移回。此外，一些块引用元素也受到这种影响。就好像这些其他元素中的某些元素以某种奇怪的方式被CSS3过渡效果赋予了填充值。

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..

我没有看到这些问题IE和Firefox，所以这个问题只出现在Chrome浏览器中。

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?

推荐答案

我只需要应用：-webkit-backface-visibility：hidden;到所有受影响的元素，一切都在Chrome中运行良好。

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

这篇关于CSS3悬停效果会对Chrome中的其他元素造成奇怪的影响的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！