Safari堆叠问题与3d转换元素

Question

我已经阅读了很多关于这个主题的类似问题，但是还没有能够使用这些建议来解决我的问题，所以试一试看看我可能做错了什么/如何我可以解决这个问题:)

我试图让＃ite​​m-2在＃item-1前面堆叠。这在Chrome等工作正常。但在Safari中失败。任何建议都会受到很大的评价。

我有以下html元素：

＆＃13;

＆＃13;

 html,
 body {
   min-height: 100%;
   backround: #FFF;
 }
 * {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
 }
 #scene-bg,
 #scene {
   position: absolute;
   top: 0;
   left: 0;
 }
 #grid {
   -webkit-perspective: 865px;
   -moz-perspective: 865px;
   perspective: 865px;
   width: 987px;
   height: 720px;
   position: absolute;
   top: 0;
   left: 0;
   z-index: 1;
   border: 1px solid;
 }
 .inner {
   width: 100%;
   height: inherit;
   position: relative;
   top: 17px;
   left: 6px;
   border: 1px solid;
   -webkit-transform: rotateX(-0.3302deg) rotateY(20.5164deg) rotateZ(-0.8716deg);
   -moz-transform: rotateX(-0.3302deg) rotateY(20.5164deg) rotateZ(-0.8716deg);
   transform: rotateX(-0.3302deg) rotateY(20.5164deg) rotateZ(-0.8716deg);
 }
 #item-1 {
   position: relative;
   width: 100%;
   height: inherit;
   -webkit-transition: background .25s ease-out;
   -moz-transition: background .25s ease-out;
   transition: background .25s ease-out;
   background: red;
 }
 #item-2 {
   position: absolute;
   z-index: 99999;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: blue;
 }

＆＃13;

<div id="grid">
  <div class="inner">
    <div id="item-1">
    </div>
    <!-- /#item-1 -->
  </div>
  <!-- /.inner -->
  <div id="item-2">
  </div>
  <!-- /#item-2 -->
</div>
<!--/#grid -->

＆＃13;

＆＃13;

＆＃13;