CSS3D在Mobile Safari上重叠div

Question

Mobile Safari会瞬间显示正确的用户界面版本。

之后翻译的三维表面相互切割。

.top {
background-color: #a58855;
transform: translateY(-50px) rotateX(90deg);
-webkit-transform: translateY(-50px) rotateX(90deg);
}

Please see full code on jsbin

任何想法如何解决问题？我尝试添加自定义z索引和z-translations，但似乎没有任何帮助。半秒钟后，图像将“修正”到破碎状态。