Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
The box-shadow shape is opaque behind the element background #12
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.
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...
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!
referenced this issue
Jan 28, 2012
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.