我正在尝试使用CSS Grid，剪辑路径和转换，并且遇到了一个奇怪的错误。设置如下：一个网格，其中包含一些由SVG剪切的项目，每个项目包含一个图像和一些文本以及悬停时的缩放变换。
现在我看到的错误是剪辑路径有时会“闪烁”，显示未剪辑的项目毫秒。到目前为止，我已经在Chrome和Opera中看到过这种行为，Firefox表现正常。
以下是一些CSS（笔在此处演示错误和完整代码：https://codepen.io/konishkichen/pen/qPMwLb）
.grid {
display: grid;
grid-gap: 0.5rem;
grid-template-columns: repeat(3, 1fr);
}
.item {
min-height: 15rem;
display: flex;
position: relative;
overflow: hidden;
transition: $transition;
&:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: rgba(#000, 0.5);
z-index: 10;
transition: $transition;
}
&:hover {
transform: scale(1.03);
transition: $transition;
z-index: 30;
&:before {
background: transparent;
transition: $transition;
}
.image {
filter: grayscale(0%);
transition: $transition;
}
}
.image {
position: absolute;
top: 0;
left: 0;
filter: grayscale(100%);
transition: $transition;
object-fit: cover;
width: 100%;
}
.details {
z-index: 10;
position: relative;
padding: 1.5rem;
}
&:nth-child(1) {
grid-column-end: span 2;
grid-row-end: span 2;
clip-path: polygon(0 0, 83% 0, 100% 100%, 0 100%);
}
&:nth-child(2),
&:nth-child(8) {
clip-path: polygon(0 0, 100% 0, 100% 100%, 13% 100%);
margin-left: -35%;
}
&:nth-child(3),
&:nth-child(9) {
clip-path: polygon(13% 0, 100% 0, 100% 100%, 26% 100%);
margin-left: -35%;
}
&:nth-child(4) {
grid-column: 2 / span 2;
grid-row: 3 / span 2;
clip-path: polygon(16% 0, 100% 0, 100% 100%, 0 100%);
}
&:nth-child(5) {
clip-path: polygon(0 0, 100% 0, 87% 100%, 0 100%);
margin-right: -33%;
}
&:nth-child(6) {
clip-path: polygon(0 0, 87% 0, 74% 100%, 0 100%);
margin-right: -33%;
}
&:nth-child(7) {
grid-column-end: span 2;
grid-row-end: span 2;
clip-path: polygon(0 0, 83% 0, 100% 100%, 0 100%);
}
}
我的代码中是否有错误或者这是浏览器（webkit？）问题？