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

我正在试验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的？）问题？

来源

2017-10-14 koni666

不webkit的，眨眼。 –

不太确定。我的系统上有一个更老的Epiphany浏览器，引用了libwebkit2gtk-4.0-37。除了不理解网格布局外，我还看到相同的剪辑路径闪烁。 – ccprog

对我来说-webkit-backspace-visibility: hidden在元件的非转化状态工作，这answer was found

来源

2017-12-14 14:43:39

只是想尝试一下，但我认为这个问题可能会在最新版本的Chrome中修复，因为我无法再现它。你可以吗？ – koni666

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

回答

相关问题