gradient not painted at the right coordinate

[paulrouget]

Without the transform, it's properly rendered.

<style>

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

  .red {
    position: absolute;
    left: 25px;
    width: 50px;
    height: 26px;
    background: red;
    background-image: linear-gradient(to bottom, red, yellow);
}

</style>

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