CODEWITHSUNDEEP
htmlcssgoogle-chromestylingbackdrop
Khalil_Ahmed
Khalil_Ahmed

Reputation: 1

CSS backdrop-filter: blur() for anchor tag is not working in chrome browser

The anchor tag is shown as a button with a transparent background and white borders. I am using the .class for styling. The backdrop property works in the Firefox browser but not in Chrome, I've also used "-webkit-backdrop-filter" but it shows an invalid property value in Chrome.

Chrome-browser-preview


Firefox-browser-preview

Please let me know if someone can help me out of this.

Upvotes: 0

Views: 272

Answers (1)

perrelet
perrelet

Reputation: 93

Nested backdrop-filters do not render in Chrome. However you can workaround this limitation by putting your backdrop-filter on a :before pseudo element instead.

backdrop-filter not working for nested elements in Chrome provides an in depth look at why this is the case for Chrome.

Upvotes: 0

Related Questions