I ran across this bug the other day, when overlaying some content with a translucent background.
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:
It’s ugly, but it works. If anyone has a simpler fix, I’d love to hear about it.
There’s a much better way:
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!