Menu
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:
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;
}
609
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.
101
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
21
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
