CSS blur filter for backgound, the edge is badly

Issue #12311108 • Assigned to Rick J.

Details

Author
John J.
Created
Jun 12, 2017
Privacy
This issue is public.
Found in
  • Microsoft Edge
Reports
Reported by 2 people

Sign in to watch or report this issue.

Steps to reproduce

Demo

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


Element’s background cropped (this is the bug)

https://jsfiddle.net/5mw3n1og/3

First crop the overflow background, then apply blur effect.
So right edge and bottom edge are semi-transparent (blurred).

demo_bad


Element’s content cropped (this is properly)

https://jsfiddle.net/Lq29ud9f/4

First apply blur effect, then crop the overflow content.
So right edge and bottom edge are not semi-transparent (blurred).

demo_good


Expect

Should always:
First apply blur effect, then crop the overflow background and content.

Attachments

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.

    Highlight:
    explain

  • 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

  • Microsoft Edge Team

    Changed Status to “Not reproducible”

  • Changed Status from “Not reproducible”

  • Element’s background cropped is buggy.
    This is a demo, to show the bug, wrong result.

    Element cropped is properly.
    This is a also demo, to show the expect, proper result.

  • Changed Steps to Reproduce

  • Microsoft Edge Team

    Changed Assigned To to “James M.”

    Changed Assigned To to “Rick J.”

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

Sign in