CSS blur filter for backgound, the edge is badly

Issue #12311108 • Assigned to James M.


John J.
Jun 12, 2017
This issue is public.
Found in
  • Microsoft Edge
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce


Element’s right part and bottom part are cropped by overflow:hidden.

Element’s background cropped


First crop, then blur,
so right edge and bottom edge are semi-transparent (blurred).


Element cropped


First blur, then crop,
so right edge and bottom edge are not semi-transparent (blurred).


Another demo: http://www.bilibili.com

Look, the navbar’s edge is semi-transparent (blurred).

Expect: (rendered by Firefox, Chrome is the same)


Should always: First blur, then crop


Comments and activity

  • Microsoft Edge Team

    Changed Assigned To to “James M.”

  • Hello,

    Thank you for providing this information about the issue. After thorough testing, we are unable to reproduce this problem in Edge. Please test this behavior in our latest creator’s update 15063 or the insider build 16215. If you are still having the problem, please run dxdiag (Windows key + r and type dxdiag, enter, then click Save all Information) and attach the txt file.

    Best Wishes,
    The MS Edge Team

  • I tested on Windows Build 15063.
    I sure these are happened, same as issued.

    I believe this is a logic problem, not GPU.

    Can you give screenshots to show what your test result?

  • Hello,

    Thank you for the update. I have attached the results I am seeing in Edge15063 using Windows 10 Enterprise 64-bit. Please update this case if you have new information for us to consider.

    Best Wishes,
    The MS Edge Team

  • Yes, I seen the bug from your screenshot.


  • Hello,

    Which demo are you showing me? I get the proper result (which matches your screenshot) when I run https://jsfiddle.net/Lq29ud9f/4

    Best Wishes,
    The MS Edge Team

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

Sign in