Question

正如标题所示，当设置了transform属性时，模糊滤镜在Edge中不起作用。下面的小提琴证明了这一点。

#content-background {
    display: block;
    position: fixed;

    top: 0;
    left: 0;
    height: 100%;
    width: 100%;

    background: url("https://i.imgur.com/qfGEt3o.jpg") no-repeat top center fixed;
    background-size: cover;
    filter: blur(5px) brightness(60%);
}

<div id="content-background" style="transform: scale(1.03)"></div>

在删除transform属性时，模糊效果很好。它也适用于Chrome和Firefox。这是Edge中的错误吗？

我正在运行的Edge 15上应支持transforms和filters。

Answer 1

如果我没记错，这是Edge中的一个错误。

这应该有效：

#content-background {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: url("https://i.imgur.com/qfGEt3o.jpg") no-repeat top center fixed;
    background-size: cover;
    transform: scale(1.03)
}

#content-background::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: url("https://i.imgur.com/qfGEt3o.jpg") no-repeat top center fixed;
    background-size: cover;
    filter: blur(5px) brightness(60%);
}

Answer 2

Internet Explorer，Edge 12或Safari 5.1及更早版本不支持过滤器属性。

https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_filter_blur

换句话说，它仅适用于Edge 13或更高版本。

设置transform属性时，CSS模糊过滤器在边缘不起作用

2 个答案: