Jump to content

backdrop filter bug or browser problem?


Nic727
 Share

Recommended Posts

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.

1546731304-bug.png

 

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).

1546731306-bug2.png

Here I hover image 1 :

1546731306-bug3.png

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

1546731306-bug4.png

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

Link to comment
Share on other sites

  • 2 weeks later...

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...