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 布局。不过我也暂时删除了脚本，bug依然存在

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

Answer 1

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

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

Safari iOS 中的奇怪 "filter:grayscale" 错误？

Weird "filter:grayscale" bug in Safari iOS?

css

mobile-safari