Rendering/Flickering/Glitch issue in Chrome using CSS 'backdrop-filter:blur'

Question

I do face a rendering problem using backdrop-filter: blur(12px); in Chrome 76 on MacOS Mojave. Whenever I start to hover with my mouse over the opened tabs in Chrome, the div using the backdrop-filter starts flickering and the div is subdivided into smaller rectangles having different colors and are split by horizontal lines with shadows.

I don't know if it's a rendering problem, a glitch, some overflow problem or just a bug in Chrome.

Here is the fiddle.

I already tried variations of:

transform: translateZ(0);
backface-visibility: hidden;
overflow: hidden;
margin: 0
will-change:top;
position: static;

Nothing seemed to work.

Minimal Example:

<html>
<head>
</head>

<body>
    <div id="articleViewOverlay" class="articleViewOverlay">
    </div>
</body>

</html>

.articleViewOverlay {
    position: fixed;
    width: 200px;
    height: 200px;
    border-style: dashed;
    backdrop-filter: blur(12px);
    background-color: rgba(125, 125, 125, 0.4); 
    margin: 0; 
    overflow: hidden;
}

Here's another example of recreation of that strange behaviour: https://jsfiddle.net/jxkfh9b8/embedded/result The whole browser starts flashing (Chrome 79, Mac OS X El Capitan) when I move the mouse over browser tabs... — neoDev, Feb 02 '20 at 11:42

score 5 · Accepted Answer · answered Sep 10 '19 at 16:15

5

From your description, my guess is that you're encountering this bug. If so, feel free to star that bug (top-left corner) to get updates. There aren't any workarounds at this point, but it's work in progress.

answered Sep 10 '19 at 16:15

Mason Freed

5,493
1
19
13

2

That's exactly the problem I've been facing. Thank you! :) I'll guess I just have to wait for a fix. Until then, I'll just do a simple blur with the elements below the modal that is displayed. – Georg Sep 11 '19 at 19:50
Just for posterity, this bug was fixed in Chrome 79 and above. – Mason Freed Dec 22 '20 at 17:56

score 1 · Answer 2 · answered Aug 19 '21 at 11:57

1

I had the same problem, adding this to the element being blurred fixes it:

 -webkit-transform:translate3d(0,0,0);

because if forces gpu rendering

answered Aug 19 '21 at 11:57

Marghen

255
2
6

score -1 · Answer 3 · answered Mar 22 '20 at 22:41

-1

The bug was fixed in Chrome build 79.0.3945.1 (Oct 16th, 2019)

answered Mar 22 '20 at 22:41

Cyral

13,999
6
50
90

4

I still experience those big flashes in Chrome 80.0.3987.149. Just recreated it opening the JSFiddle I posted in the OP comments: moving the mouse over tabs, adress bar, bookmarks makes huges flashes... Update: Also with the OP fiddle... – neoDev Mar 23 '20 at 09:18
@neoDev Interesting... I am on 80.0.3987.132 and the issue in my own projects (and the fiddle) are fixed now – Cyral Mar 25 '20 at 17:28
2

I am on Chrome 80.0.3987.149 and the bug is still there – Grodriguez Mar 31 '20 at 07:49
Still not fixed... – Honsa Stunna Nov 12 '21 at 21:17
On chrome 97 still an issue. – Shashank Bhatt Jan 27 '22 at 10:22
On Chrome Version 106.0.5249.119 still not fixed – Rotem Oct 21 '22 at 07:14
Make a comment on the bug tracker, nobody has said anything since 2020 there. They won't see this. – Cyral Oct 26 '22 at 14:39

Rendering/Flickering/Glitch issue in Chrome using CSS 'backdrop-filter:blur'

3 Answers3

Linked