Филтърът за размазване на CSS не работи в край, когато е зададено свойството за трансформация

Както подсказва заглавието, филтърът за размазване не работи в Edge, когато е зададено свойството трансформация. Цигулката по-долу демонстрира това.

https://jsfiddle.net/wkjvwgyy/1/

#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>

При премахване на свойството трансформация, размазването работи добре. Освен това работи правилно в Chrome и Firefox. Това грешка в Edge ли е?

Както трансформира, така и филтрите трябва да се поддържат на Edge 15, който изпълнявам.


filter css microsoft-edge
person Hele    schedule 08.09.2017    source източник

Отговори (2)


arrow_upward
1
arrow_downward

Ако си спомням правилно, това е грешка в 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%);
}
person Thomas Colbert    schedule 09.09.2017
comment
Това работи, но на Edge все още остава незамъглено очертание, както се вижда на i.imgur.com/0MjIfDu.png. Предполагам, че едно алтернативно решение би било да приложите филтъра върху изображението предварително. - person Hele; 10.09.2017

arrow_upward
0
arrow_downward

Свойството филтър не се поддържа в Internet Explorer, Edge 12 или Safari 5.1 и по-стари версии.

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

С други думи, работи само в Edge 13 или по-нова версия.

person Rickard Elimää    schedule 08.09.2017
comment
Работя с Edge 15. Освен това филтърът за размазване работи правилно сам. Проблемът възниква само когато свойството за трансформация също е зададено. - person Hele; 08.09.2017