クリップパスとスケールの組み合わせでフリッカーが発生する

Question

CSSグリッド、クリップパス、トランスフォームを試していて、奇妙なバグがあります。設定は次のとおりです：SVGによってクリップされたいくつかのアイテムを含むグリッド。それぞれがイメージとテキストを含み、ホバーにスケール変換を加えたものです。

私が見ているバグは、クリップされていないアイテムがミリ秒間表示されていることをクリップパスで時々「点滅」することです。これまでChromeとOperaでこの動作が見られましたが、Firefoxは正常に動作します。

.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の？）の問題である：

ここでCSSの一部は（https://codepen.io/konishkichen/pen/qPMwLbバグと、ここで完全なコードを実証ペン）ですか？

Answer 1

は私のために要素の非形質転換状態で-webkit-backspace-visibility: hiddenは、このanswer was found