Fatal编程技术网
  • css/
  • Css “奇怪”；过滤器：灰度“；SafariiOS中的bug？

Css “奇怪”；过滤器：灰度“；SafariiOS中的bug？

css

Css “奇怪”；过滤器：灰度“；SafariiOS中的bug？,css,mobile-safari,Css,Mobile Safari,我正在图像上使用filter:grayscale（1）。图像的容器还应用了伪：after，背景色设置为混合模式：screen。除了Safari iOS之外，一切似乎都正常 以下是隔离图像的CSS： .grid-item img { filter:grayscale(1); transition:filter 0.25s ease; } .grid-item:after { content:""; position:absolute; top:0;

我正在图像上使用
filter:grayscale（1）
。图像的容器还应用了伪
：after
，背景色设置为
混合模式：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);
}
你可以在这里看到整个网站：

这里有一段视频现场直播：

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

我试图删除混合模式，因为我认为这是导致错误的原因，但只有当我从图像中删除
过滤器：灰度（1）
时，错误才会消失。我还使用JS插件在桌面上进行布局。但我也暂时删除了脚本，错误仍然存在

总而言之，这似乎是
过滤器：灰度的问题，但我不确定这是否是由其他CSS属性的组合引起的。以前有没有人经历过这种情况，知道是什么原因造成的？或者这只是一个无法解决的bug？
阅读时，我发现使用
过滤器将以下属性应用于元素会消除故障：


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