在Y轴上旋转的元件将固定容器平分

Question

这似乎影响仅限Safari浏览器，但我测试过的所有版本。

由于某种原因，当在Y轴上旋转元素时，当它位于固定容器的顶部时，元素会穿过它。像这样;

.fixed-container {
  position: fixed; 
  z-index: 0;
  background: skyblue;
  top: 0;
  right: 0;
  left: 0;
  height: 400px;
}

.transformed-element {
  z-index: 2;
  position: absolute;
  background-size: contain;
  -webkit-transform: perspective(600px) rotateZ(-64deg) rotateX(10deg) rotateY(50deg);
  transform: perspective(600px) rotateZ(-64deg) rotateX(17deg) rotateY(50deg);
  height: 400px;
  width: 600px;
  background: url(http://scalabilitysolved.com/content/images/2014/May/stackoverflow.png) no-repeat center center;
} 

Here is the jsfiddle of the above code.

这是预期的行为还是浏览器错误？如何在固定容器上实现我想要的东西？