OS X Safari中3d变换和动画元素的奇怪行为

Question

我很难在Safari中调试3d变换后的元素。当通过@keyframes动画应用3d变换时，所讨论的元素开始表现奇怪。移除动画并直接应用3D变换时，一切都很好。

良好的行为（表格正确调整，中间单元格保持在中间位置，所有浏览器都正常）：

#child {
  position: absolute;
  top: -5em;
  left: 50%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 10px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: transform 3s ease-in-out;
  transition: transform 3s ease-in-out;
  -webkit-transform:
            translateX(-50%)
            translateZ(-100px)
            rotateX(5deg) 
            rotateY(-10deg) 
            rotateZ(5deg);
  transform:
            translateX(-50%)
            translateZ(-100px)
            rotateX(5deg) 
            rotateY(-10deg) 
            rotateZ(5deg);
  width: 150vw;
  height: calc(10em + 110vh);
  //-webkit-animation: anim 5s ease-out 1 forwards;
  //animation: anim 5s ease-out 1 forwards;
}

小提琴：http://jsfiddle.net/fallenartist/aafj2h0w/1/

仅限Safari中的错误行为（在调整浏览器窗口大小时，表格会大小调整并向左右移动）：

@-webkit-keyframes anim {
    from {
        opacity: 0;
        -webkit-transform:
            translateX(-50%)
            translateZ(-100px)
            rotateX(5deg) 
            rotateY(-10deg) 
            rotateZ(5deg);
    }
    to {
        opacity: 1;
        -webkit-transform:
            translateX(-50%)
            translateZ(0)
            rotateX(-5deg) 
            rotateY(10deg) 
            rotateZ(-5deg);
    }
}
@keyframes anim {
    from {
        opacity: 0;
        transform:
            translateX(-50%)
            translateZ(-100px)
            rotateX(5deg) 
            rotateY(-10deg) 
            rotateZ(5deg);
    }
    to {
        opacity: 1;
        transform:
            translateX(-50%)
            translateZ(0)
            rotateX(-5deg) 
            rotateY(10deg) 
            rotateZ(-5deg);
    }
}
#child {
  position: absolute;
  top: -5em;
  left: 50%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 10px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: transform 3s ease-in-out;
  transition: transform 3s ease-in-out;
  width: 150vw;
  height: calc(10em + 110vh);
  -webkit-animation: anim 5s ease-out 1 forwards;
  animation: anim 5s ease-out 1 forwards;
}

小提琴：http://jsfiddle.net/fallenartist/aafj2h0w/2/

为什么动画具有完全相同的变换值会导致元素在Safari中的行为不同？