IE9 “tearing” background images behind scrolling blocks with background transparency

I've made a design that uses a static auto-scrolling block with a transparent background over parent block with a background image. In IE9, scrolling causes the parent background image to "tear" instead of remaining fixed like on the other A-level browsers. Does this problem sound familiar?

In case I am not explaining this correctly, see an example on the live site. This example should show you one vertical scroll bar inside of the layout. Moving this bar to scroll will cause the "tearing" in IE9. (Note: that I'm using the jQuery Color pl开发者_如何转开发ugin---which might cause the problem. It is also possible that IE requires z-order and/or absolute/relative CSS positioning---which would be rather inconvenient.)

---

Removing the inline style of background-color: rgba(0, 102, 51, 0.5) from #PresentationFlow with the dev tools made the problem dissapearfor me.

Is that the color plugin maybe?

UPDATE: One solution might be to add the transparent background to #PresentationOverflowContainer instead. you need to remove some padding but then it should look o

---

I would try wrapping #PresentationFlow in a div, and put the background-color on that div.

<div id="wrapper" style="background-color: rgba(0, 102, 51, 0.5)">
  <div id="PresentationFlow"> <!-- overflow: auto -->
  </div>
</div>