CSS3 box-shadow blur in IE9

Question

Has anyone else noticed that IE9\'s \"standard\" implementation of CSS box-shadow differs from other browsers? Whenever I use box-shadow and set a blur value, IE9 seems to r

Answer 1

ie10 has the same problem. To target both ie9 and ie10 you can use this css hack. No need for contitional comments. (A CSS only solution)

.yourclass {
  -moz-box-shadow: 0px 0px 11px rgba(0, 0, 0, .7);
  -webkit-box-shadow: 0px 0px 11px rgba(0, 0, 0, .7);
  -o-box-shadow: 0px 0px 11px rgba(0, 0, 0, .7);
  box-shadow: 0px 0px 11px rgba(0, 0, 0, .7); 
}
@media screen and (min-width:0\0) {
    /* IE9 and IE10 rule sets go here */
 .yourclass {
   box-shadow: 0px 0px 18px rgba(0, 0, 0, .7); 
 }
}

(Play around with the ie values)

Answer 2

I also had this problem and solved it for myself with this script (using jQuery).

Please note this is experimental and I haven't tested performance. Also: You have to run it again if you add elementss to your dom which has box-shadow. I guess that could be solved using a htc-file instead.

$(function(){
    fixBoxShadowBlur($('*'));
});

function fixBoxShadowBlur(jQueryObject){
    if($.browser.msie && $.browser.version.substr(0, 1) == '9'){
        jQueryObject.each(function(){
            boxShadow = $(this).css('boxShadow');
            if(boxShadow != 'none'){
                var bsArr = boxShadow.split(' ');
                bsBlur = parseInt(bsArr[2]) || 0;
                bsBlurMeasureType = bsArr[2].substr(("" + bsBlur).length);
                bsArr[2] = (bsBlur * 2) + bsBlurMeasureType;
                $(this).css('boxShadow', bsArr.join(' '));
            }
        });
    }
}

Answer 3

Are you using the right syntax?

-webkit-box-shadow: 2px 2px 16px #2b2b2b;
-moz-box-shadow: 2px 2px 16px #2b2b2b;
box-shadow: 2px 2px 16px #2b2b2b;

Answer 4

Unfortunately MS does not seem to understand the concept of standards.

I think the simplest solution is to set up a conditional style sheet.

<!--[if IE 9]> <link href="css/ie9-fix.css" rel="stylesheet" type="text/css" /> <![endif]-->

I've found I need to adjust up about 40% in IE9 to match Firefox, et al.

Firefox CSS:

-moz-box-shadow: 0px 0px 11px rgba(0, 0, 0, .7);
-webkit-box-shadow: 0px 0px 11px rgba(0, 0, 0, .7);
box-shadow: 0px 0px 11px rgba(0, 0, 0, .7); 

IE9 CSS:

-moz-box-shadow: 0px 0px 18px rgba(0, 0, 0, .7);
-webkit-box-shadow: 0px 0px 18px rgba(0, 0, 0, .7);
box-shadow: 0px 0px 18px rgba(0, 0, 0, .7);