我正在开发一个目录,该目录使用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属性时,问题好像也得到了解决,但是悬停样本位于其他样本后面,这对该项目不起作用。
欢迎提出任何想法。