当悬停时，-transform:scale会导致“闪烁”现象

Question

我正在开发一个目录，该目录使用css-transform属性来缩放每个“样品”悬停时的大小。

我遇到的问题是：在某些浏览器和某些网站上，当你悬停在这些样品上时，页面会闪烁。我无法确定问题出在哪里，因为在某些网站上它可能只在Safari中出现，而在其他网站上则只会在Chrome中出现，而在另一些网站上则完全没有问题。

我希望能获得更多信息，但也许有人遇到过类似的问题。

.swatch {
  -webkit-box-shadow: #EFEFEF 2px 2px 0px;
  -webkit-transform: scale(1);
  -webkit-transition-duration: 0.2s;
  border: 1px solid white;
  position: relative;
  z-index: 1;

.swatch:hover {
  position:relative;
  z-index:10;
  transition-duration: 0.2s;
  transform:scale(1.8);
  -webkit-transition-duration: 0.2s;
  -webkit-transform:scale(1.8);
}

当移除任何z-index属性时，问题好像也得到了解决，但是悬停样本位于其他样本后面，这对该项目不起作用。

欢迎提出任何想法。

- Tony Beninate

---

我曾经遇到过类似的问题，怀疑是由于 Chrome 的图形实现出现了故障，因为我在开发版本（启用硬件加速）上遇到了这个问题，但在标准版本（未启用）上没有。 - Rich Bradshaw

我也无法确定问题所在，有些网站可能只出现在Safari中，有些可能只在Chrome中出现，而有些则完全没有问题。为了澄清一下，您是创建了多个网站吗？还是创建了一个网站并在多个不同的浏览器中进行测试？ - user255594

当我测试各种CSS3属性的转换时，我也遇到了这个问题。我怀疑正如Rich所说，这是浏览器中仍需要解决的一些小故障。你的CSS看起来很好。我唯一可能建议的是将过渡属性放在主要元素上，而不是悬停状态。 - Jonathan Miller

Answer 1

我成功地添加了

-webkit-backface-visibility: hidden;

针对出现问题的元素（在您的情况下是.swatch）进行调整。

但是，请在较旧版本的Chrome和Safari中进行测试，以确保它不会破坏其他内容。 根据我的经验，特别是Safari 4并不太喜欢这种方法。

- alalonde

---

然而，由于某种未知的原因，这会导致缩放文本（-webkit-transform: scale(1.1);）变得模糊。 - aliz_bazar

加一分，解决了这个不太小的问题。下面那个也不会太难。 - Ben

直到aliz_bazar提出的问题得到解决，这种背面可见性技巧并不是一个好的解决方案。 - Gersom

Answer 2

今天早上我遇到了同样的问题。但是我在网上找到了答案。

为了防止 Blink 问题，将以下属性放在你的 .swatch 类上（而不是在 :hover 上）：

-webkit-transform-style: preserve-3d;

- Fábio ZC

---

这个对我有用。使用这段代码后，我的“旧版 WebKit 浏览器”问题减少了。 - courtsimas

Answer 3

尝试将position:relative更改为position:absolute，并/或指定位置属性（top: x，left: y）。

不知道是否有效，只是随便提供一个想法。

- Chris Fletcher

---

感谢所有的反馈。我已经实现了其中的一些建议，但仍然没有运气。我开始认为这可能只是与CSS3、Chrome、Safari和某些图形设置有关的故障。 @cfouche；回答你的问题，我在一家软件公司工作，我们提供客户在其网站上安装的软件。这就是我所说的“许多不同的网站”。因此，在相同的设置下，它将在一个网站上找到，但在另一个网站上“闪烁”。很奇怪，对吧？ - Tony Beninate

这就是解决我的问题的方法。使用了position: absolute，我猜测它给它分配了一个z-index，从而解决了问题。 - Sam Parmenter

z-index 也可以在相对定位的元素上使用，所以我不确定你的评估是否正确。 - Abadaba

Answer 4

在Chrome浏览器中，当鼠标悬停在图像上（img:hover）时，可以正常工作。您可以像这样使用。

.swatch img:hover

http://dinolatoga.com/2009/09/18/amazing-imag-hover-effects-with-webkit-and-css/

- user1352888

Answer 5

谈到另一个话题，我遇到了同样的问题（可怕的闪烁）。
然而，这不是在悬停原则上发生的。它是在一个可拖动区域上，我希望在上尽可能平滑。该区域最初是通过css margin-left属性移动的。
然后，我使用了-webkit-transform：'translate3d（X，Y，Z）'来实现平滑渲染，效果很好。

但是，使用translated3d会在第一次拖动时（仅在iPad上）出现著名的闪烁。

感谢Fábio ZC，-webkit-transform-style: preserve-3d;完美地解决了闪烁问题。

对于那些想了解更多关于-webkit-transform-style: preserve-3d及其涉及内容的人，请参考相关资料。

回到原始问题，这是我的想法：

1. 你提到Safari和Chrome（即Webkit）。问题只出现在这些浏览器上吗？这可能与-webkit相关的属性有关。

2. 如果是这样，-webkit-backface-visibility: hidden;或-webkit-transform-style: preserve-3d;仍然是值得尝试的候选项：
   

3. 你是否将它们附加到了.swatch类上？（不是悬停状态，否则它们会被视为太晚，因为动画将直接播放）

4. 你说整个页面都在闪烁？奇怪的是只应该影响到色板。

- PIIANTOM

Answer 6

我曾经遇到同样的问题，尝试使用不透明度而非 z-index。

img:hover{
    opacity: 0;
}

- Yuval

Answer 7

我从悬停类中删除了这行代码："display: none;"，令人惊讶的是，它起作用了。你可以试一下，希望能解决你的问题。

- PhilAppDevemlopment