Backdrop-filter in chrome has black border

css blur background without image
css blur overlay
css blur background behind div
backdrop-filter: drop-shadow
backdrop filter: blur gradient
css filter background color only
blur background behind text/css
css blur behind background

I tried to add the future-property backdrop-filter in chrome:

.glass {
    --webkit-backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px); /* chrome */
}

After activating it in chrome://flags/#enable-experimental-web-platform-features it finally works, but, I get a black border. Anybody an idea how to remove that border??


Edit

There is no zero-data-bug or something (tested with the SO-page):

If I take 3px instead of 10px the border is smaller, but not away:

Here is a fiddle but better, you copy it local, because fiddle also just the right boder in example. Then it looks like this:

This is caused by rendering bugs in Chrome as described in comments above, and is unfixable as of now.

With a bit of mucking around, you can cheat it somewhat, but it doesn't behave entirely correctly.

This Fiddle was one of my many attempts, but it only alleviates the problem. You can't entirely fix it. By carefully controlling where the effect starts and ends, you can avoid chrome reading outside the bounds of the window and blending black, at the expense of a few pixels at the end.

    .frontcontainer{
        position: fixed;
        width: 100%;
        height: 100%;
    }

    .front1{
        position: relative;
        right: 3px;
        width: calc(100% - 6px);
        backdrop-filter: blur(3px);
    }

I also tried layering divs on top of each other and using a lighter blur towards the edge, which would have worked, while not being 100% right, but the layered background blurs don't interact correctly, or consistently.

backdrop-filter, The backdrop-filter CSS property lets you apply graphical effects none: No filter is applied to the backdrop. .box { background-color: rgba(255, 255, 255, 0.3); border-radius: 5px; backdrop-filter, Chrome Full support 76. Backdrop Filter extends beyond Border Radius. Ask Question Asked 4 years, 1 month ago. Active 2 years, 7 months ago. Backdrop-filter in chrome has black border. 1.

I used filter instead of backdrop-filter, but it might not be quite what you want it to be, but it does blur the text as expected, as the bug report in chrome might still remain, described in this post for the backdrop-filter.

body{margin:0;}
    
        .front{
            position: fixed;
            width: 100%;
            text-align: center;
            font-size: 20px;
            -webkit-filter: blur(5px);
            -moz-filter: blur(5px);
            -o-filter: blur(5px);
            -ms-filter: blur(5px);
        }
        
        .back {
            margin: 20px;
        }
<body>
    
    <div class="front">
        <p> this is in the front </p>
    
    </div>
    
    <div class="back">
    <p> this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back this is in the back </p>
    </div>
    
    
</body>

[filter-effects-2] Backdrop filters should not use BackgroundImage , BackgroundImage is defined as the backdrop up to the isolation pa. the Chrome implementation *doesn't respect border-radius, which is that has an invert filter applied, so it shows up as black background with white text. The backdrop-filter property in CSS is used to apply filter effects (grayscale, contrast, blur, etc) to the background/backdrop of an element.The backdrop-filter has the same effect as the filter property, except the filter effects are applied only to the background and instead of to the element’s content.

I don't know if you're still trying to deal with this, but I worked around it by using inset white shadows to hide the black blur to some extent.

So for a bar at the bottom of the window I have the following:

backdrop-filter: blur(2px);
box-shadow:
    inset 3px -2px 5px rgba(255,255,255,0.6),
    inset -3px -2px 5px rgba(255,255,255,0.6);

It's not perfect but it almost hides the black glow caused by Chrome's rendering bug.

Of course this is Chrome-specific, you don't want the white inset shadow in other browsers which don't have this bug.

backdrop-filter, The backdrop-filter property in CSS is used to apply filter effects (grayscale, contrast, blur, etc) to the background/backdrop of an element. The. Backdrop-filter is included as part of the CSS Filters specification and thus, similarly to the filter property, it inherits all the familiar filtering functions such grayscale () , blur (), and sepia (). The only difference here is that it will affect the elements underneath the selected element.

backdrop-filter test page - atarixle, backdrop-filter:blur(10px); box-shadow:0px 5px 10px black; border:solid 5px on chrome 77), 1 is opacity 0.2 and has backdrop-filter:saturate(0.0) instead of  The backdrop-filter CSS property lets you apply graphical effects such as blurring or color shifting to the area behind an element. Because it applies to everything behind the element, to see the effect you must make the element or its background at least partially transparent.

497522, The box has a background of a blurred version of its backdrop. What went With this CL, the border box of the element containing backdrop-filter is plumbed  Infopackets Reader "Ainsley" writes: " Dear Dennis, I'm using Windows 10. My screen has two big black bars on either side of it taking up approximately 2 inches on each side, shrinking my available screen. I have tried updating the video driver and restarting. This did not help. I have googled the issue and found your article 'How to Fix: Windows 10 Black Border (Shrinking Screen)', but I don

backdrop-filter CSS property comes to Chrome and Chromium , Great, Safari, Edge UWP, Edge Chromium and Google Chrome now support backdrop-filter, Firefox is all that's left. Favorite heart outline button  Black frame surrounding the embedded video I ask, why do I embed the video as a hot spot to the scene, there is a black line around the video (html5) Hurry, thank you!

Comments
  • Couldn't you just disable the blur? This looks like chrome is blurring with zeroed data outside the edge of the backdrop... I doubt you want to disable the blur though...
  • @SamPearman updated my post.
  • Yeah, exactly. If it's doing what I think it's doing, then it's a bug in Chrome. Can you provide some more context? Some HTML or something? Edit: Ah, never mind. I think I see what you mean.
  • Haha :D I tested that last two screenshots with the stackoverflow-page :D I will add some html/css
  • That looks like a rendering bug in Chrome to me. It's trying to blur exactly as you told it to, but the renderer gets null or 0 data for the 10 or 3 pixels outside of the image, so when it does the blur, it's treating that null data as real data, and doing an RGB blur. If it was doing an RGBA blur instead, then this wouldn't be noticeable because the A channel would be completely transparent (although it would still be wrong on Chrome's part). Looks unfixable to me without changing Chrome's codebase, as it's simply considering extra data that doesn't exist.
  • If your site's background is a solid colour, you could actually get away with using tricks like this one. No chance if you need it on a rainbow though.
  • So I just give you the reps since your answer is the closest. I hope Google Chrome will fix this bug one day :D
  • Thanks, but this blurs the front-div instead of back-div on the position of the front-div :D
  • @MatthiasBurger I know, but thought I'd just show the option of filter :P maybe you could find a workaround for it
  • Yep, I will test a bit with filter - maybe there is a solution.
  • @MatthiasBurger have you looked at the jsfiddle yet? ;P
  • @MatthiasBurger alright :) I hope there'll be a better solution then mine then! Hope you'll figure it out and let me know when you found one, I'm pretty curious