CODEWITHSUNDEEP
cssmobile-safari
tobiasg
tobiasg

Reputation: 1073

Weird "filter:grayscale" bug in Safari iOS?

I'm using filter:grayscale(1) on images. The container of the image also have pseudo :after applied with a background color set to mix-blend-mode:screen. Everything seems to work, except on Safari iOS.

Here's the CSS for the images isolated:

.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);
}

You can see the whole site here: http://www.tobiasgerhardsson.com/work/linazedig

And here's a video showing it live: https://streamable.com/a6lxe

The bug is hard to explain, but it seems like it's moving images in between the others, so that some images gets duplicated and replaced with the same image, or fragments of other images are shown in eachother. It disappears on scroll, but sometimes the bug appears again randomly.

I've tried to remove the mix-blend-mode as I thought that was causing the bug, but the bug only disappears when I remove the filter:grayscale(1) from the images. I'm also using a JS plugin for doing a flexbox masonry grid layout on desktop. But I've also removed the script temporarily, and the bug remains.

So all in all, this seems to be a problem with the filter:grayscale, but I'm not sure if it's caused by a combination of other CSS properties or not. Has anyone experienced this before and know what could be causing it? Or is it just a bug not possible to solve?

Upvotes: 3

Views: 2082

Answers (1)

tobiasg
tobiasg

Reputation: 1073

Reading this thread, I found that applying the following properties to the element with the filter makes the glitch go away:

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

Upvotes: 7

Related Questions