Safari iOS中奇怪的“ filter：grayscale”错误？

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

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

我已经尝试删除混合混合模式，因为我认为是导致错误的原因，但是仅当我从图像中删除filter:grayscale(1)时，错误才会消失。我还使用JS插件在桌面上进行flexbox masonry grid布局。但是我也暂时删除了该脚本，该错误仍然存​​在。

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

Answer 1

[阅读this thread，我发现使用filter将以下属性应用于元素会使毛刺消失：

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