PIE CSS: rgba backgrounds + box shadows

Question

I noticed that with CSS like

body {
    background: #f00;
}
div {
    background: rgba(255,255,255,0.4);
    -pie-background: rgba(255,255,255,0.4);
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.4);
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.4);
    box-shadow: 0 0 10px rgba(0,0,0,0.4);
    padding: 50px;
    behavior: url(PIE.htc);
}

I will get the below in FireFox & IE/PIE

is it possible to fix that? the box shadow showing through the rgba background?

Answer 1

Bad news for you: It doesn't look like it works.

According to the CSS3Pie website, it supports RGBA colours, but...

Currently all color stops are rendered fully opaque, even if specifying an rgba color value. This is due to a limitation in VML's linear gradient syntax which does not allow setting opacity for individual color stops.

(see http://css3pie.com/documentation/supported-css3-features/)

They also have a ticket logged for it: https://github.com/lojjic/PIE/issues#issue/7