Warum funktioniert dieser CSS Blur nicht in IE, funktioniert aber in Chrome?

Question

Dieser Weichzeichner funktioniert gut in Chrome, aber nicht Edge oder IE. Es scheint wie ein Microsoft-Bug. Kann jemand herausfinden, was in meinem Code falsch ist, damit ich das erwartete Verhalten erreichen kann?

Danke!

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-Filter funktionieren nicht in IE 10 - sie werden nicht unterstützt. Einige ältere Versionen von Firefox unterstützen keine Filter. Sie können unter folgendem Link nach Support suchen: http://caniuse.com/#feat=css-filters