클립 경로와 눈금의 조합으로 인해 깜박임이 발생합니다.

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%); 
    } 
} 

내 코드에서 오류가 발생하거나 브라우저 (웹킷?) 문제 :

여기에 CSS의 일부 (https://codepen.io/konishkichen/pen/qPMwLb 버그 여기에 전체 코드를 보여 펜)입니까? 나 -webkit-backspace-visibility: hidden 요소의 비 변형 상태가 일에 대한

Answer 1

이 answer was found