PIE
PIE copied to clipboard
lojjic
The box-shadow shape is opaque behind the element background
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.
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
It should be documented somewhere that you can only really apply box-shadow to elements with opaque backgrounds.
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 also just ran into this problem. I understand the difficulties involved in fixing this, but please add it to the docs at least. Thanks!
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!
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.
Check this one....CSS Transparent border with rgba
http://www.corelangs.com/css/box/transparent.html
Justin
