Does anyone know a hack to "fix" broken `background-attachment: fixed` after a CSS3 transform?

Question

I have a node that has background-attachment: fixed applied to it. The fixed background "breaks" if it follows a node that has a -webkit-transform applied to it, and I'm looking for a hack to fix that if anyone knows of one (e.g. there are multiple webkit css3 bugs that can be fixed with weird things like applying -webkit-perspective, etc).

Note that this isn't as simple as moving the nodes around. In my live code it breaks no matter what order the nodes are in (though I realize it doesn't in the jsfiddle)

And I already reported the bug, but a similar one (for position: fixed) has been open for over a year

example (http://jsfiddle.net/m3scX/2/):

<img src="http://d.tile.stamen.com/watercolor/5/25/13.jpg" />

<div id="parent">
    <div id="child"></div>
</div>

css:

img {
    -webkit-transform: translate3d(-37px, 29px, 0px);
}

#parent {
    position : relative;
    border   : 1px solid #000;
    overflow : hidden;
    height   : 100px;
}

#child{
    background : url('http://d.tile.stamen.com/watercolor/7/99/57.jpg') 0px 0px no-repeat fixed;
    width      : 100%;
    height     : 100px;
    position   : absolute;
    top        : 0px;
    left       : 0px;
}

Answer 1

Wrapping the translated object into div with opacity:0.99 works for me.

Answer 2

It is not a perfect solution, because it has side efects, but may be can give way to better workarounds

If you wrap your 3d transformed element in a overflow : hidden div, it seems to work:

<div class="container">
<img src="http://d.tile.stamen.com/watercolor/5/25/13.jpg" />
</div>
<div id="parent">
    <div id="child"></div>
</div>

.container {
    overflow: hidden;
}

fiddle

I have tried similar solutions to this one (for instance, setting opacity: 0.99; instead of overflow, but with no luck...