CSS element becomes invisible if rotated too far on Chrome, works on Safari

[deathcap]

Chrome left, Safari right

Dragging the mouse up-right to rotate. Safari has no problem continuing to show the CSS element as it is rotated further, but in Chrome it disappears, slightly after the position where this screenshot is taken (left)

Testing with SHOW_GL_PLANE = true, reveals that in Chrome the GL element is visible, but in Safari it always remains below the CSS element:

however, even with no GL element the CSS element still becomes invisible on Chrome

[deathcap]

Looks like this is specific to iframes at a certain angle in Chrome. Renders OK:

<div style="-webkit-transform-style: preserve-3d; transform-style: preserve-3d; overflow: hidden; pointer-events: none; position: absolute; z-index: 1; top: 0px; left: 0px; margin: 0px; padding: 0px; -webkit-perspective: 1098.46717087976px; perspective: 1098.46717087976px; width: 1024px; height: 910px;">
  <div style="position: absolute; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; pointer-events: auto; width: 1024px; height: 910px; -webkit-transform: translateZ(1098.46717087976px) matrix3d(0.00176642544101924, 0.000433619803516194, -0.000711627071723341, 0, 0.000371911562979221, 0.00131268834229559, 0.00172303966246545, 0, -0.391672998666763, 0.77069765329361, -0.502610683441162, 0, 0, 0, -4.59003210067749, 1); transform: translateZ(1098.46717087976px) matrix3d(0.00176642544101924, 0.000433619803516194, -0.000711627071723341, 0, 0.000371911562979221, 0.00131268834229559, 0.00172303966246545, 0, -0.391672998666763, 0.77069765329361, -0.502610683441162, 0, 0, 0, -4.59003210067749, 1);">
    <iframe src="http://browserify.org" style="width: 100%; height: 100%;">
    </iframe>
  </div>
</div>

rotating slightly, iframe becomes invisible:

<div style="-webkit-transform-style: preserve-3d; transform-style: preserve-3d; overflow: hidden; pointer-events: none; position: absolute; z-index: 1; top: 0px; left: 0px; margin: 0px; padding: 0px; -webkit-perspective: 1098.46717087976px; perspective: 1098.46717087976px; width: 1024px; height: 910px;">
  <div style="position: absolute; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; pointer-events: auto; width: 1024px; height: 910px; -webkit-transform: translateZ(1098.46717087976px) matrix3d(0.00175775436218828, 0.00044993232586421, -0.000722881173714995, 0, 0.000392798974644392, 0.00127339991740882, 0.00174771167803556, 0, -0.397632151842117, 0.781812608242035, -0.480268239974976, 0, 0, 0, -4.59003210067749, 1); transform: translateZ(1098.46717087976px) matrix3d(0.00175775436218828, 0.00044993232586421, -0.000722881173714995, 0, 0.000392798974644392, 0.00127339991740882, 0.00174771167803556, 0, -0.397632151842117, 0.781812608242035, -0.480268239974976, 0, 0, 0, -4.59003210067749, 1);">
    <iframe src="http://browserify.org/" style="width: 100%; height: 100%;">
    </iframe>
  </div>
</div>

changing iframe to div, renders ok again:

<div style="-webkit-transform-style: preserve-3d; transform-style: preserve-3d; overflow: hidden; pointer-events: none; position: absolute; z-index: 1; top: 0px; left: 0px; margin: 0px; padding: 0px; -webkit-perspective: 1098.46717087976px; perspective: 1098.46717087976px; width: 1024px; height: 910px;">
  <div style="position: absolute; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; pointer-events: auto; width: 1024px; height: 910px; -webkit-transform: translateZ(1098.46717087976px) matrix3d(0.00175775436218828, 0.00044993232586421, -0.000722881173714995, 0, 0.000392798974644392, 0.00127339991740882, 0.00174771167803556, 0, -0.397632151842117, 0.781812608242035, -0.480268239974976, 0, 0, 0, -4.59003210067749, 1); transform: translateZ(1098.46717087976px) matrix3d(0.00175775436218828, 0.00044993232586421, -0.000722881173714995, 0, 0.000392798974644392, 0.00127339991740882, 0.00174771167803556, 0, -0.397632151842117, 0.781812608242035, -0.480268239974976, 0, 0, 0, -4.59003210067749, 1);">
    <div style="background-color: red; width: 100%; height: 100%;">
    </iframe>
  </div>
</div>

and even an iframe with a data URL:

<div style="-webkit-transform-style: preserve-3d; transform-style: preserve-3d; overflow: hidden; pointer-events: none; position: absolute; z-index: 1; top: 0px; left: 0px; margin: 0px; padding: 0px; -webkit-perspective: 1098.46717087976px; perspective: 1098.46717087976px; width: 1024px; height: 910px;">
  <div style="position: absolute; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; pointer-events: auto; width: 1024px; height: 910px; -webkit-transform: translateZ(1098.46717087976px) matrix3d(0.00175775436218828, 0.00044993232586421, -0.000722881173714995, 0, 0.000392798974644392, 0.00127339991740882, 0.00174771167803556, 0, -0.397632151842117, 0.781812608242035, -0.480268239974976, 0, 0, 0, -4.59003210067749, 1); transform: translateZ(1098.46717087976px) matrix3d(0.00175775436218828, 0.00044993232586421, -0.000722881173714995, 0, 0.000392798974644392, 0.00127339991740882, 0.00174771167803556, 0, -0.397632151842117, 0.781812608242035, -0.480268239974976, 0, 0, 0, -4.59003210067749, 1);">
    <iframe src="data:text/html,<body bgcolor=purple>" style="width: 100%; height: 100%;">
    </iframe>
  </div>
</div>

but as soon as I change it to an http url, it disappears. Actually it seems Chrome begins to render the frame briefly, but then when the page loads, hides the element (?). This effect is most clear with src="https://rawgithub.com/".

[deathcap]

http://crbug.com/116554 webkit-perspective breaks on iframe