Position: fixed, when parent has translate3d

Question

I have

<div class="parent">
    parent

    <div class="child">child</div>

</div>

With

.parent {
    border: solid red;
    width: 200px;
    height: 200px;
    transform: translate3d(20px,20px,20px);
}


.child {
    position: fixed;
    top: 0;
    left: 0;
    border: solid green;
    width: 100%;
    height: 100px;
}

See it live here

But the child does not seem to be relatively positionned according to the viewport.

I know there is a long-lived webkit bug about this, and some workarounds.

The problem is that I have no control of the parent html / js code (lib code), and I can only customize the child to achieve my goal.

Is there a way to achieve my goal without touching the parent CSS ?