Backdrop Filter extends beyond Border Radius

Question

I\'m trying to use the CSS backdrop-filter and border-radius together, but the backdrop filter appears to extend beyond the border radius.

Answer 1

You just found a bug!

This is a bug on WebKit's implementation of the backdrop-filter CSS property. It does not account for the border-radius delimitation of the filter – not even when using overflow: hidden;.

The same is true for clip-path or pretty much any masking property applied to elements using backdrop-filter, and it remains unsolved in the latest WebKit Nightly Build, as of May 21, 2016.

While this problem is not solved, you have three options:

• Wait for the fix to implement the feature.
• Implement the buggy feature anyway because it's not your code's problem.
• Use javascript instead.

I would stick with the second option in cases where this issue is not too noticeable (i.e. border-radius: 5px;) and avoid using it at all when the bug becomes graphically obvious (like in your snippet).

Here's the bug report at the WebKit Bugzilla: https://bugs.webkit.org/show_bug.cgi?id=142662

EDIT:

Webkit Bugzilla bug report was closed on 2016/05/25 since patch have been landed. The correction is visible on the newest webkit nightly build. ;)