The box-shadow shape is opaque behind the element background

[lojjic]

The draft spec (http://dev.w3.org/csswg/css3-background/#box-shadow) says that outset box-shadow rendering should only display outside the element's border-box, and be transparent behind it. This allows the element to have a non-opaque background and see through to elements behind it.

Currently PIE displays the box-shadow as a solid shape behind the element, so if the element has a transparent background then the view will be blocked by the box-shadow color.

This probably requires a way to mask the box-shadow shape with another shape equal to the border-box. Perhaps with the Compositor filter.

It seems unlikely that this will be a common problem in real-life designs, as usually when you have a shadowed element it has an opaque background color.

[jacobdubail]

Dang. This is exactly what I'm trying to do... only with an inset box-shadow. I'm implementing a non-inset shadow in IE, but would love to use an rgba value for the background: http://dev.jacobdubail.com/category/journal

[glodigital-michael]

It should be documented somewhere that you can only really apply box-shadow to elements with opaque backgrounds.

[geerlingguy]

Just ran into this problem; I sometimes use a transparent background image on certain elements, and not being able to have a truly transparent background on box-shadowed elements is a bit crippling at times.

I've worked around the issue on a couple of my sites, but a few sites won't be able to use CSS3pie until this particular issue is resolved...

[kauffj]

I also just ran into this problem. I understand the difficulties involved in fixing this, but please add it to the docs at least. Thanks!

[falemagn]

I actually need this feature, I have a transparent layer with a shadow, which is obviously not working in IE with PIE. I'll see if I can hack it up somehow, but I've never looked at PIE's code before nor I know anything about IE's internals, so it might take some time (which I don't have). If somebody has a couple fast pointers to where I should head to make this work, please adivse me!

[Benjaminsson]

+1 on what geerlingguy said

[asgh]

I use jQuery animation to fade boxes in and out. After a fadeIn the box-shadow turns black, and no longer matches the background.

I'm OK if it has to ignore the opacity during the fade in/out animation, but once the animation is done it should fix the shadow since the background is no longer transparent.

I just realized this only happens on IE7, and not on IE8.

[justinhimt]

Check this one....CSS Transparent border with rgba

http://www.corelangs.com/css/box/transparent.html

Justin