剪辑路径和缩放的组合会导致闪烁

Question

我正在试验CSS网格，剪辑路径和转换，遇到了一个奇怪的错误。设置如下：一个网格，其中包含由 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？）问题？

Answer 1

对我来说，

-webkit-backspace-visibility: hidden处于元素工作的未转换状态，找到了这个答案