CODEWITHSUNDEEP
internet-explorer-9css
daGUY
daGUY

Reputation: 28773

CSS3 box-shadow blur in IE9

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 render the blur at about half the value that Firefox, Safari, Chrome, and Opera do.

Is there any way around this? And what exactly is the point of IE9 supporting box-shadow as a standard property if it doesn't look the same as box-shadow in all the other browsers?

(Technically, Safari 5 still only supports -webkit-box-shadow and not the standard box-shadow property, but it also happens to render identically to box-shadow in Firefox 4, Chrome 11, and Opera 11. IE9 is the odd man out, despite supporting the same standard box-shadow syntax).

Upvotes: 14

Views: 15559

Answers (4)

eye-wonder
eye-wonder

Reputation: 1193

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)

Upvotes: 3

Eddy
Eddy

Reputation: 29

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);

Upvotes: 2

Albin
Albin

Reputation: 2557

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(' '));
            }
        });
    }
}

Upvotes: 1

breezy
breezy

Reputation: 1918

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;

Upvotes: 3

Related Questions