-transform:在悬停时导致'闪烁'的缩放

Question

我正在开发一个目录,该目录使用css -transform属性在悬停时缩放每个'swatch'.

这是我的问题:在某些浏览器和某些网站上,当您将鼠标悬停在样本上时,会导致页面在翻转时"闪烁".我无法解决这个问题,在一个网站上它可能是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特别不是一个大粉丝.

Answer 2

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

要防止出现Blink问题,请将follow属性放在您的.swatch类上(而不是on :hover):

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