Blur (Backdrop-Filter) not working

I’m submitting a … (check one with “x”)

[x] Bug report => search github for a similar issue or PR before submitting
[ ] Feature request
[ ] Other, please describe

Tell about your platform

• Vue.js version : 3.2.31
• Browser name and version : Chrome(100.0.4896.88)|Edge (100.0.1185.44)|Firefox (FF does not support backdrop-filter yet)
• This package version : 5.0.3

Current behavior The Blur Option does not work (does not blur anything)

Expected behavior Content behind the background should be blured

Minimal reproduction of the problem with instructions Using default settings will already show that the background does not get blured, also additional options do not blur anything. The problem lies in the css setting of “opacity: 0.5” this does make the background div transparent but backdrop-filter does not work with the opacity value. A fix is to use "background: rgba(255,255,255,0.5) instead of “background: #FFF; opacity: 0.5”. Then the blur does worl correctly. Currently i added an addistional sass file which does these settings here:

.vld-parent{
    .vld-background{
        background: rgba(136,136,136,0.5) !important;
        opacity: 1 !important;
    }
}

So i get a grey background which is transparent with the blur working as it should.

Also maybe it would be wise to have different options for the opacity, where one is for the icon and one for the background.

[ankurk91]

You can make the blur effect working with a combination of these 3 props, see example:

let loader = this.$loading.show({    
        backgroundColor: 'rgba(136,136,136,0.1)',     
        opacity: 1,
        blur: '2px'
      });

[ankurk91]

The buggy prop has been removed in v6