14

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

5
  • I've noticed this as well. I have a class that just targets IE9 with the box-shadow blur at least doubled. May 18, 2011 at 6:41
  • @someotherguy: how are you targeting IE9 only - conditional comment? Or is there a CSS parsing bug that lets you direct a style only to IE9 (like the underscore hack for IE6)?
    – daGUY
    May 19, 2011 at 16:37
  • 1
    take a look at paulirish.com/2008/… I'm using: <!--[if lt IE 7]> <html class="ie ie6"> <![endif]--> <!--[if IE 7]> <html class="ie ie7"> <![endif]--> <!--[if IE 8]> <html class="ie ie8"> <![endif]--> <!--[if IE 9]> <html class="ie ie9"> <![endif]--> <!--[if !IE]><!--> <html> <!--<![endif]--> Then you can target via CSS like: .ie9 .CLASSNAME { } May 27, 2011 at 20:45
  • It's a shame IE10 has the same problem. It means the Conditional Comments solution will no longer work. Mar 12, 2013 at 19:12
  • Looks like IE11 is still broken in this regard.
    – Tobia
    Sep 11, 2015 at 15:54

4 Answers 4

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;
4
  • 4
    Yep. I'm talking about the standard (non-prefixed) box-shadow property. It's supported in IE9, Firefox 4, Chrome 11, and Opera 11. Consistently, IE9 renders the blur value at about half what Firefox/Chrome/Opera do. They're all using that same property.
    – daGUY
    May 12, 2011 at 18:50
  • Are you sure? I did some testing and my box shadows look the same (or my glasses are slightly off). Would be nice if you could attach a screenshot of what your seeing. Oh another thing are you zoomed in? press ctrl+0 on your keyboard when your in IE9
    – breezy
    May 12, 2011 at 18:52
  • I don't have a screenshot, but a simple test will prove it. Set up a blank HTML page with nothing on it other than a single element with fixed dimensions (say 200x200px), and give it a pure black drop shadow (#000) with no offset and a 10px blur. You can very clearly see the difference, especially if you take screenshots of IE9 and Firefox and overlay them. If you then adjust the blur down to 5px, you'll see that in Firefox it'll look identical to IE9's rendering of 10px.
    – daGUY
    May 19, 2011 at 16:46
  • I noticed this too. I don't know if blur radius is exactly half, but it's definitely much smaller. Using 3px radius works fine in FF/Chrome/Safari whereas in IE9 it's virtually invisible.
    – VDest
    Mar 14, 2012 at 11:30
3

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)

2

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); 
1
  • 20
    Why use the -moz and -webkit shadows in a CSS that is targeting IE9?
    – Jesper
    Jul 6, 2011 at 6:57
1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.