4

My team and I have come across this visual-glitch using Google Chrome. I have isolated the visual-glitch to its most simple elements. Recreate the glitch by making a new .html file with the following code below and opening it in chrome.

My Current Google Chrome is (Version 78.0.3904.108 (Official Build) (64-bit)) on a MacOS Mojave Version 10.14.6 as of Dec 02, 2019

<!doctype html>
<div
  style="
    position: fixed;
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0,.3);
    backdrop-filter: blur(5px);
  "
>
</div>

You should see a mostly "grey-ish" rgba(0,0,0,.3) page with 8px of transparent margin on the top and left added from the default css of the <body> tag.

Hover your mouse over your Google Chrome's tabs bar and you will notice a visual glitch of a blurred line.

Assumptions: Due to the minimalistic nature of this .html file, my team believes it is an "artifact" from the Chrome Browser that is generally 0px and not visible. When the backdrop-filter using blur is applied to the position: fixed <div> then this non-visable artifact is displayed giving the "artifact" psudo-height from the blur.

Question: How do I get the "glitch artifact" to NOT show up, and still be able to use backdrop-filter with blur()?

Rob
  • 14,746
  • 28
  • 47
  • 65
James Essex
  • 253
  • 3
  • 9
  • Can you add an image example as well? I don't see any artifacts Chrome 78.0.3904.108 (Official Build) (64-bit) MacOS 10.15.1 – Bryce Howitson Dec 02 '19 at 23:12

3 Answers3

6

backdrop-filter can cause many bugs, possibly more than the one you identified in this question. It is probably not worth it to use this, since it is still experimental and does not have full browser support anyways.

See: https://caniuse.com/#feat=css-backdrop-filter

My suggestion would be to do something like this, which is not truly using the backdrop-filter: blur() but has the same effect. Or use other methods from that question. In the long run, it will avoid the backdrop-filter issues altogether.

There are no workarounds or fixes for the issue you describe at the moment. See this answer to a similar question regarding this same CSS feature.

Cannicide
  • 4,360
  • 3
  • 22
  • 42
1

In my search for an answer I came across this Chromium Article:

https://bugs.chromium.org/p/chromium/issues/detail?id=986206

James Essex
  • 253
  • 3
  • 9
0

try this: background-attachment: fixed

It has to do with the raw html white bg

here's a link that helped me: https://www.fourkitchens.com/blog/article/fix-scrolling-performance-css-will-change-property/

MalachNikoff
  • 11
  • 1