-transform：悬停时引起“闪烁”的标度

如何解决-transform：悬停时引起“闪烁”的标度

|| 我正在使用css -transform属性在悬停时缩放每个\'watch \'的目录。这是我的问题：在某些浏览器和某些站点上，当您将鼠标悬停在色板上时，它会导致页面“闪烁”。我也无法确定问题所在，在一个网站上它可能是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属性来解决此问题，但随后，悬停色板位于其他色板的后面；这不适用于该项目。任何想法表示赞赏。

解决方法

我成功添加了

-webkit-backface-visibility: hidden;

到令人反感的元素（在您的情况下为.swatch）。但是，请在较旧版本的Chrome和Safari中对其进行测试，以确保它不会破坏其他任何功能。以我的经验，Safari 4并不是特别喜欢。 , 今天早上我遇到了同样的问题。但是我刚才在网上找到了答案。为防止闪烁问题，请将follow属性放在.swatch类上（而不是:hover上）：

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

, 尝试将position:relative更改为position:absolute，和/或指定位置属性（top: x，left: y。不知道它是否会工作，只是将它扔在那里。 , 当将鼠标悬停在chrome中的图片（img：hover）上时效果很好。你可以这样使用

.swatch img:hover

http://dinolatoga.com/2009/09/18/amazing-imag-hover-effects-with-webkit-and-css/ , 我有同样的问题尝试使用不透明度而不是z-index

img:hover{
    opacity: 0;
}

, 在另一个主题上，我有相同的效果（可怕的眨眼）。但是，它不是基于悬停原则。它在可拖动区域，我想在iPad上尽可能平滑。该区域最初是使用css margin-left属性移动的。然后，我使用-webkit-transform \'：\'translate3d（X，Y，Z）\'进行平滑渲染，就是这种情况。但是，在第一次拖动时（仅在iPad上），使用translation3d使著名的眨眼。感谢FábioZC，-webkit-transform-style：preserve-3d;完美地消除了眨眼对于那些想更多地了解-webkit-transform-style的人：preserve-3d及其涉及的内容。回到最初的问题，这些是我的想法：您提到了Safari和Chrome（也就是Webkit）。问题仅在那些浏览器上吗？这将导致-webkit可疑属性。如果是这样，则-webkit-backface-visibility：隐藏；或-webkit-transform-style：preserve-3d;仍然是值得尝试的好候选人：您是否将它们附加到.swatch类上？（不是悬停状态，否则将被认为为时已晚，因为动画将直接播放）您说整个页面都在闪烁？奇怪，因为只影响样本。 , 我从悬停的类中删除了这一行： \“显示：无； \”，而且令人惊讶的是，这种方法行之有效。试试看，希望它能解决您的问题。

-transform：悬停时引起“闪烁”的标度

如何解决-transform：悬停时引起“闪烁”的标度

解决方法

相关推荐