blur (css) not working for background image

Not reproducible Issue #9697787

Details

Author
Andrei V.
Created
Nov 7, 2016
Privacy
This issue is public.
Found in
  • Microsoft Edge
Found in build #
14.14393
Reports
Reported by 2 people

Sign in to watch or report this issue.

Steps to reproduce

[ using Microsoft Edge 38.14393.0.0 - Microsoft EdgeHTML 14.14393 ]

I’m trying to set a blur to a background-image and it is not working.

.card_login_bg {
width: 200px;
height: 208px;
top: 0;
margin: 0 0 0 -40px;
background-position: center center;
background-size: cover;
position: absolute;
z-index: -1;
opacity: .3;
-webkit-filter: blur(20px);
-moz-filter: blur(20px);
-o-filter: blur(20px);
-ms-filter: blur(20px);
filter: blur(20px);
overflow: hidden;
}

Attachments

1 attachment

Comments and activity

  • Microsoft Edge Team

    Changed Status to “Confirmed”

    Changed Status from “Confirmed” to “Not reproducible”

  • Thank you for the report. I took a look and based on a bit simplified rephttps://jsfiddle.net/besddv6q/](https://jsfiddle.[https://jsfiddle.net/besddv6q/](https://jsfiddle.net/besddv6q/) can’t notice any difference between Edge, Chrome and Firefox on the development build of Edge, so even if we had a bug in this area - this doesn’t repro anymore.

  • It’s weird, because your test in my browsers are looking still wrong, look: https://drive.google.com/file/d/0B8oZS8Zr7apCNGZqR0dZRUFhX0E/view?usp=sharing

  • I’ve also found this - it’s caused by the z-index being below 0. For some reason this disables blurring. Doesn’t happen on any other browser.

    Bogdan - Your repo doesn’t have the z-index specified.

  • I am observing the same issue on Edge 38. Is there a workaround to this?

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

Sign in