我在图像上使用filter:grayscale(1)。图像的容器还具有应用了背景颜色设置为mix-blend-mode:screen的伪CCD_ 2。除了Safari iOS，一切似乎都正常。
以下是隔离图像的CSS：
.grid-item img {
filter:grayscale(1);
transition:filter 0.25s ease;
}
.grid-item:after {
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
display:block;
z-index:1;
mix-blend-mode: screen;
transition:opacity 0.25s ease;
pointer-events:none;
}
.grid-item.is-active:hover img {
filter:grayscale(0);
}
您可以在此处查看整个网站：http://www.tobiasgerhardsson.com/work/linazedig
这里有一段现场直播的视频：https://streamable.com/a6lxe
这个错误很难解释，但它似乎是在其他图像之间移动图像，因此一些图像被复制并替换为同一图像，或者其他图像的片段相互显示。它在滚动中消失，但有时错误会随机再次出现。
我试图删除混合混合模式，因为我认为这是导致错误的原因，但只有当我从图像中删除filter:grayscale(1)时，错误才会消失。我还使用JS插件在桌面上进行flexbox砖石网格布局。但我也暂时删除了脚本，错误仍然存在。
总之，这似乎是filter:grayscale的一个问题，但我不确定它是否是由其他CSS属性的组合引起的。以前有人经历过这种情况吗？知道是什么原因造成的吗？或者这只是一个无法解决的错误？
阅读这个线程，我发现将以下属性应用于具有filter的元素可以消除故障：
-webkit-transform: translateZ(0);
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;