css - 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

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

我曾尝试删除 mix-blend-mode，因为我认为这是导致错误的原因，但只有当我从图像中删除 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;