html - -转换 :scale causing 'blinking' when hovering

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 属性时，问题似乎也得到了解决，但是悬停样本在其他样本后面；这不适用于该元素。

如有任何想法，我们将不胜感激。

Answer 1

添加成功

-webkit-backface-visibility: hidden;

到有问题的元素(.swatch 在你的情况下)。

但是，请在旧版本的 Chrome 和 Safari 中对其进行测试，以确保它不会破坏其他任何东西。根据我的经验，Safari 4 特别不是一个大粉丝。