変換プロパティが設定されているときにCSSブラーフィルタがエッジで動作しない

Question

タイトルに示されているように、トランスフォームプロパティが設定されているときにエッジでブラーフィルタが機能しません。下のフィドルがこれを実証しています。

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>

transformプロパティを削除するには、ぼかしが正常に動作します。 ChromeとFirefoxでも正しく動作します。これはEdgeのバグですか？

私が実行しているEdge 15では、transformsとfiltersの両方がサポートされています。

Answer 1

正しく覚えていれば、これはEdgeのバグです。

これは動作するはずです：私は、エッジ15を実行している

#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

filterプロパティは、Internet Explorer、Edge 12、またはSafari 5.1以前ではサポートされていません。

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

言い換えれば、それだけでエッジ13以降で動作します。