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

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

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

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

Answer 1

阅读此线程，我发现将以下属性应用于带有 的元素可以使filter故障消失：

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