overflow issue: parent's transform not taken into account

[paulrouget]

<style>

  .green {
    background: green; 
    position: absolute;
    width: 100%;
    height: 100px;
    transform: translateX(-200px);
  }

  .red {
    background: red;
    position: absolute;
    width: 100px;
    height: 100px;
    right: -50px;
  }

</style>

<div class="green">
  <div class="red"></div>
</div>

^ non WR vs WR.

The red div is cut as if it was offscreen, even though its parent transform:translate makes it onscreen.