Preserve-3d scrollers not clipping correctly

http://codepen.io/anon/pen/ENMwWb

 

.container {
  background: lightblue;
  width: 300px;
  transform-style: preserve-3d;
}

.content {
  max-height: 200px;
  overflow: scroll;
}

.rotx {
  transform: rotateX(45deg)
}

  <div class="container">
    <div class="content">
      <ol>
        <li><li><li><li><li>
        <li><li><li><li><li>
        <li><li><li><li><li>
        Should not see me.
        <li><li><li><li><li>
      </ol>
    </div>
    <div class="rotx">success</div>
  </div>

 

 

 

 

1. Open this test page: http://codepen.io/anon/pen/xRyROv
2. Notice the 2 .modal elements in the page
3. The first one has a child with rotateX, the second one does not

What happens:
In the first modal, the header and the footer are rendered transparent while still having a background rule.
In the second modal the header and footer are rendered correctly, because there is no child with rotateX.

Expected result:
The header and the footer in both modals should be rendered the same.