CSS的TranslateZ轉換不會將最高的Z值放在頂端

在這個JSFiddle中，爲什麼Back div會在Chrome和Firefox的Front div前呈現？在Mobile Safari中，Front在前面呈現。CSS的TranslateZ轉換不會將最高的Z值放在頂端

的HTML

<div id='view'> 
     <div id='front' class='transformed'>Front</div> 
     <div id='back' class='transformed'>Back</div> 
    </div>

而CSS

div#view { 
     -webkit-perspective: 100px; 
     -moz-perspective: -100px; 
    } 

    div.transformed { 
     position:absolute; 
     width: 100px; 
     height: 100px; 
     left: 100px; 
     top: 100px; 
    } 

    div#front { 
     background-color: red; 
     -webkit-transform: translateZ(20px); 
     -moz-transform: translateZ(20px); 
    } 

    div#back { 
     background-color: rgba(0, 0, 255, 0.5); 
     -webkit-transform: translateZ(0px); 
     -moz-transform: translateZ(0px); 
    }

我的預期是，既然前已經被翻譯成正Z 20像素，並返回已經翻譯爲0px，Front應該在後面呈現。

這是一個錯誤，還是我錯過了什麼？

來源

2012-11-19 guy