Safari iOS 中奇怪的“过滤器：灰度”错误？

Question

我在图像上使用filter:grayscale(1)。图像的容器还应用了伪:after，背景颜色设置为mix-blend-mode:screen。除了 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

这个错误很难解释，但它似乎是在其他图像之间移动图像，因此一些图像被复制并替换为相同的图像，或者其他图像的片段显示在彼此中。它会在滚动时消失，但有时该错误会再次随机出现。

我已尝试删除 mix-blend-mode，因为我认为这是导致错误的原因，但只有当我从图像中删除 filter:grayscale(1) 时，错误才会消失。我还使用 JS 插件在桌面上进行 flexbox masonry grid 布局。但是我也暂时删除了脚本，bug依然存在。

总而言之，这似乎是 filter:grayscale 的问题，但我不确定它是否是由其他 CSS 属性的组合引起的。有没有人经历过这种情况并知道可能是什么原因造成的？还是只是一个无法解决的错误？

Answer 1

阅读this thread，我发现将以下属性应用于带有filter 的元素可以消除故障：

-webkit-transform: translateZ(0);
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;