IE9 RGBA Overlay Bug

I ran across this bug the other day, when overlaying some content with a translucent background.

.overlay {
    background: url("black-30-percent-opacity.png");
    background: rgba(0,0,0,.3);
}

Yep, that’s all it takes to take to trigger this one - use rgba() for the overlay. If you scroll the overlay in IE9, the content behind the overlay will appear to move as well, with some strange artifacts, like this:

You can check out a live example to compare.

The best workaround I can find is to treat IE9 like the rest of the IEs - use a background image. This code does the trick:

.overlay {
    background: url("black-30-percent-opacity.png");
    background: -moz-linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.3));
    background: -o-linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.3));
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,.3)), to(rgba(0,0,0,.3)));
    background-image: linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.3));
}

It’s ugly, but it works. If anyone has a simpler fix, I’d love to hear about it.

UPDATE

There’s a much better way:

.overlay {
    background: url("data:image/png;base64,xxxxx");
}
*+html .overlay {
    background: url("black-30-percent-opacity.png");
}

A data URI (where “xxxxx” is the Base64-encoded data for the image) works in IE9, along with pretty much every other browser besides IE7-. No need for the much more computationally expensive gradients, though you do need to target older IEs, since the data URI overrides the other image when placed in the same block.

Thanks to Ruslan Savenok for the idea!