border-radius + overflow:hidden = ignored filter:blur(5px)

Not reproducible Issue #7165426


Apr 11, 2016
This issue is public.
Reported by 2 people

Sign in to watch or report this issue.

Steps to reproduce

  1. Open in Edge.
  2. Observe that the image isn’t blurred.


Comments and activity

  • Microsoft Edge Team

    Changed Assigned To to “Rick J.”

  • Edge renders incorrectly by not blurring the image (see attached screenshot).
    Chrome, Safari, and Firefox all render the example correctly, with the image blurred per the CSS filter style being applied to it; see other attached screenshot.
    Removing the overflow:hidden and/or border-radius:5px style from the example prevents the bug from occurring and causes the image to correctly blur.
    (Discovered this Edge bug while investigating )

  • Microsoft Edge Team

    Changed Assigned To from “Rick J.” to “Ibrahim O.”

    Changed Assigned To to “Rick J.”

    Changed Status to “Not reproducible”

  • Okay, so which issue is this a duplicate of?

  • If it helps, i have a similar problem which might have the same origin.
    When it comes to border-radius and nested position relative/absolute elements with the parent container having an overflow: auto/scroll, filters are no longer working.

    The following example causes Edge and IE11 not to render the filter effect:

        Filter Bug
    html, body {
    .image-link {
    transition:filter 0.35s ease-in-out;
    .image-link:hover {
    .image {

    I also created a plunker.

  • Hello,

    Thank you for providing this information about the issue. We have confirmed the problem, and we are working on a solution for a future build of Edge. We are tracking this issue as a duplicate of an existing internal bug report. We look forward to additional feedback you may have on how we can improve Microsoft Edge.

    Best Wishes,
    The MS Edge Team

  • Nearly year after bug is still present.

You need to sign in to your Microsoft account to add a comment.

Sign in