이 CSS 흐림 효과가 IE에서 작동하지 않지만 Chrome에서 작동하는 이유는 무엇입니까?

Question

이 흐림 효과는 Chrome에서 잘 작동하지만 Edge 또는 IE에서는 잘 작동하지 않습니다. 그것은 Microsoft 버그처럼 보입니다. 누군가가 내 코드에서 무엇이 잘못되어 예상되는 동작을 얻을 수 있습니까?

감사합니다.

https://jsfiddle.net/o3xpez4s/1/

<div id="MainBackground"> 
    <div id="TextBoxArea"> 
     <div id="BlurDiv"></div> 
     <div id="TextDiv">TEXT GOES HERE</div> 
    </div> 
</div> 

#MainBackground { 
    background-image: url(http://placekitten.com/700/300); 
    height: 250px; 
    width: 600px; 
    border-radius: 8px; 
} 
#TextBoxArea { 
    /* This should float towards the bottom of the MainBackground image */ 
    /* It should have a clean, non-blurred border */ 
    position: relative; 
    width: 450px; 
    top: 170px; 
    left: 60px; 
    border: 2px solid; 
    border-color: black; 
    border-radius: 25px; 
    overflow: hidden; 
    padding: 10px; 
    text-align: center; 
    height: 45px; 
} 
#BlurDiv { 
    /* This should contain the blurred background image */ 
    /* The image is moved a bit so that the eyeballs of the image are visible and blurred */ 
    position: absolute; 

    width: 100%; 
    height: 100%; 

    top: -100px; 
    left: -50px; 
    padding-left: 50%; 
    padding-top: 50%; 

    background-image: url(http://placekitten.com/800/300); 
    background-position-x: -134px; 
    background-position-y: -52px; 
    background-repeat: no-repeat; 

    -webkit-filter: blur(10px); 
    filter: blur(10px); 
} 
#TextDiv { 
    /* This just contains text. Text text should not be blurred. */ 
    position: relative; 
    color: white; 
    font-size: 40px; 
    font-weight: normal; 
} 

Answer 1

CSS3 필터는 IE 10에서 작동하지 않습니다 - 그들은 지원되지 않습니다. 일부 이전 버전의 Firefox는 필터를 지원하지 않습니다. 이 링크에서 지원 여부를 확인할 수 있습니다 : http://caniuse.com/#feat=css-filters