backdrop filter bug or browser problem?

[Nic727]

Hi,

 

I'm trying to add some blur background with backdrop filter and it's really a nice feature if you want to get the fluent design from Microsoft, but I have a weird glitch and I don't know if it's a bug with the filter itself or the fact that I'm working on an offline website with MS Edge.

Backdrop filter doesn't seem to take transition into consideration.

Problem 1 :

Home screen. The button has a blurred background, but since my page go from black to image while loading, it keep the black until the image finish the transition. Same when changing the image.

 

Problem 2 :

While creating my blog page, I thought it was cool to have a grayscale image, but since it's a background image, it only work with a backdrop filter layer.

Here is what it looks like (I took some feeds from WWF for my work in progress only since I don't have blog yet).

Here I hover image 1 :

Here is the bug. When hovering the second image, it remove the backdrop-filter from the first image.

It's very weird, because it only affect the image above and not the one bellow or the second above. If I hover the image with the bug, it go back to normal...

Do you have any idea what may be the problem here?

 

Thank you

[Nic727]

Just want to update.

 

Look like backdrop filter doesn't take transition into consideration even if it's transition happening in the background. Backdrop-filter should only used for certain case like blurred navigation or other things without transitions.

 

Thank you