剪辑路径和比例的组合导致闪烁

Question

我正在尝试使用 CSS Grid、clip-path 和 transforms，但遇到了一个奇怪的错误。设置如下：一个网格，其中包含几个由 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在元素的非转换状态下工作，这个answer was found