-transform:scale 导致“闪烁”悬停时
我正在开发一个目录，它使用 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 属性时问题似乎也得到了解决，但悬停样本落后了其他样本；这不适用于该项目。
任何想法表示赞赏。
I am working on a catalog which uses css -transform attribute to scale each 'swatch' upon hovering.
Here's my problem: In some browsers and on certain sites, when you hover over the swatches, it causes the page to 'blink' as your roll over them. I cannot nail the problem down either, on one site it may be unique to Safari, on another it may only happen in Chrome, on another it's perfectly fine.
Wish I had more information, but maybe someone else has run into a similar problem.
.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);
}
It also seems that the problem is remedied when removing any z-index attributes, but then the hover swatch is behind the other swatches; which does not work for this project.
Any thoughts are appreciated.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（8）
我已成功添加
到有问题的元素（在您的情况下是
.swatch）。不过，请在旧版本的 Chrome 和 Safari 中对其进行测试，以确保它不会破坏其他任何内容。根据我的经验，Safari 4 并不是我的忠实粉丝。
I've had success adding
to the offending element (
.swatchin your case).However, test it in older versions of Chrome and Safari to make sure it doesn't break anything else. In my experience, Safari 4 specifically isn't a big fan.
今天早上我也遇到了同样的问题。但不久前我在网上找到了答案。
为了防止 Blink 问题，请将以下属性放在
.swatch类上（而不是:hover上）：I had the same problem at this morning. But I found an answer on the web few moments ago.
To prevent the Blink issue, put the follow property on your
.swatchclass (not on:hover):尝试将
position:relative更改为position:absolute，和/或指定位置属性（top: x、left: y代码>。不知道它是否会起作用，只是把它扔在那里。
Try changing
position:relativetoposition:absolute, and/or specify position attributes (top: x,left: y.No idea if it will work, just throwing it out there.
当鼠标悬停在 Chrome 中的图像（img：hover）上时效果很好。你可以这样使用
http:// /dinolatoga.com/2009/09/18/amazing-imag-hover-effects-with-webkit-and-css/
when mouse over the images(img:hover) in chrome works fine. you can use like this
http://dinolatoga.com/2009/09/18/amazing-imag-hover-effects-with-webkit-and-css/
我遇到了同样的问题尝试使用不透明度而不是 z-index
I had the same problem try using opacity instead of z-index
在不同的主题上，我得到了相同的效果（可怕的眨眼）。
然而，它并不遵循悬停原则。它位于可拖动区域，我希望在 iPad 上尽可能平滑。该区域最初是通过 css margin-left 属性移动的。
然后，我使用 -webkit-transform':'translate3d(X, Y, Z)' 来平滑渲染，就是这样。
但是，在第一次拖动时，translated3d 的使用导致了著名的眨眼（仅限 iPad）。
感谢 Fábio ZC，-webkit-transform-style:preserve-3d; 完美地摆脱了眨眼
对于那些想了解更多有关 -webkit-transform-style:preserve-3d 以及涉及的内容。
回到原来的问题，这些是我的想法：
你提到了Safari和Safari。 Chrome（即 webkit）。问题只出现在那些浏览器上吗？这会导致 -webkit 可疑属性。
如果是这样，-webkit-backface-visibility：hidden;或-webkit-transform-style：preserve-3d;仍然是值得尝试的良好候选者：< br>
做过您将它们附加到 .swatch 类中吗？ （不是悬停状态，否则，它们会被认为太晚了，因为动画将直接播放）
你说整个页面都在闪烁？奇怪的是，只有样本会受到影响。
On a different subject, I had the same effect (the awfull blink).
However, it wasn't on hover principles. It was on a dragable area, I wanted as smooth as possible on iPad. The area was originally moved with a css margin-left property.
Then, I used -webkit-transform':'translate3d(X, Y, Z)' for the smooth rendering, which is the case.
BUT, the use of translated3d made the famous blink, on the first drag (on iPad only).
Thanks to Fábio ZC, the -webkit-transform-style: preserve-3d; worked perfectly to get rid of the blink
For those who wants to know more about the -webkit-transform-style: preserve-3d and what is involved.
Back to the original problem, these are my thoughts:
You mention Safari & Chrome (so, webkit). Is the problem only on those browser? Which would lead to -webkit suspicious properties.
If so, -webkit-backface-visibility: hidden; or -webkit-transform-style: preserve-3d; are still good candidates to be tried:
Did you attach them on the .swatch class? (not hover state, otherwise, they will be considered too late, as the animation will be played directly)
You stated that the whole page is blinking? Strange as only the swatches should be impacted.
对我来说，上面提到的 CSS 修复都不起作用，但就我而言，原因有所不同。希望这能帮助其他面临同样问题的人。
我使用scale(0.8) 结合不透明度更改为0 来“淡出”div 元素。这效果很好，但闪烁/闪烁真的很烦人。在我们的例子中，这种闪烁的原因是父容器正在经历高度变化，同时子 div 缩放到 0.8。两个“动画”以某种方式发生冲突并导致眨眼。缩放完成后更改父div的高度，解决了一切。
For me none of the mentioned css fixes worked, but in my case the cause was something different. Hopefully this will help someone else that is facing the same issue.
I am using scale(0.8) in combination with an opacity change to 0 to 'fade out' the div elements. This works well but the blinking/flickering was really annoying. In our case the cause for this blinking was a parent container that was undergoing a height change at the same time the child div's were scaling to 0.8. Both 'animations' were conflicting somehow and causing the blinking. Changing the height of the parent div after the scaling completes, solved everything.
我从悬停类中删除了这一行：
“显示：无；”令人惊奇的是，这确实有效。尝试一下，希望它能解决您的问题。
I deleted this line from the hovering class:
"display: none;" and amazingly, that worked. Try it and hope it solves your problem.