Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Background blur on Toasts producing weird artifacts

See original GitHub issue

This is my first time reporting an issue. Hopefully there isn’t anything missing.

Bootstrap: v4.2.1 Operating System: Windows 10 Pro 17134.523 Google Chrome Version 71.0.3578.98 (Official Build) (64-bit) Reduced test case: This problem is actually visible on the official documentation for toasts and can be seen here: https://getbootstrap.com/docs/4.2/components/toasts/#translucent Proposed Fix: I’ve only been able to fix it by removing the blur altogether.

.toast{
      backdrop-filter: initial;
}

I have been able to reproduce this on codepen

Issue Analytics

State:
Created 5 years ago
Comments:9 (4 by maintainers)

Top GitHub Comments

1reaction

MartijnCuppenscommented, Mar 6, 2019

Thanks for sharing this, @visionlewis!

1reaction

karimcambridgecommented, Feb 18, 2019

I never used to get but, but even since 4.3.1 I’m getting this now.

Top Results From Across the Web

backdrop-filter: blur produces jarring, high-contrast artifacts ...

backdrop-filter: blur seems to spontaneously create these weird artifacts. I have seen this pretty much everywhere I've ever seen backdrop-filter: blur used ...

CSS transition effect makes image blurry / moves image 1px ...

I'm on Chrome 27 on OSX, and it's fine. I believe that when the content gets put into a layer it gets turned...

Weird artifacts in transparent windows with blur. No ... - Reddit

Weird artifacts in transparent windows with blur. No artifacts when blur is disabled.

User Clip: Clip: Artifacts from the Lincoln Book Shop | C-SPAN.org

October 1, 2011 | Clip Of Artifacts from the Lincoln Book Shop This clip, ... MAKING IT INSPIRED BY A AN ALEXANDER GARDNER...

Background Features in Google Meet, Powered by Web ML

We implemented separable filters for the weighted blur, instead of the popular Gaussian pyramid, as it removes halo artifacts surrounding the ...