webkit translate3d 问题（peek-thru）

我正在使用 PhoneGap 构建一个 iOS 应用程序。我使用translate3d CSS 动画来创建“翻转”效果。

这对于更简单的元素非常有用...带有前/后 div 的 DIV，可能还有一个或两个额外的跨度。

但是当我尝试翻转更大的元素......即整个屏幕时，我会遇到重绘故障。一旦我交换 css 类来开始转换，会发生什么，“底部”div 的一部分会弹出“顶部”div，然后发生翻转，然后再次弹出。而且它并不是显示整个元素...它是沿着我正在执行平移 3d 旋转的轴分割的元素的一半。

关于可能导致这种情况的任何想法或理论？在 iPad 上作为应用程序以及在 Safari 桌面上发生的情况都是一样的，因此似乎是一个 webkit 问题。

会不会是一些 CSS 问题？或者尝试使用复杂的嵌套元素进行全屏translate3d 旋转，其中的大背景图像超出了Safari 可以处理的范围？

更新1：

我在缩小问题范围方面取得了进展。

发生的情况是，当我执行translate3d 翻转时“窥视”的元素恰好是之前通过translate3d 定位的子元素。

我想用translate3d转换我的“页面”结构：

<div id="frontbackwrapper">
    <div id="front">    
    </div><!--/front-->
    <div id="back">  
    </div><!--/back-->
</div><!--/frontbackwrapper-->  

这本身就有效。前面的 div 被后面的 div 替换，具有卡片翻转的效果。

问题是，在进行整页翻转之前，我已经对其中的一些元素进行了动画处理#front使用translate3d的div：

<div id="frontbackwrapper">
    <div id="front">  

        <div class="modal"></div>  

    </div><!--/front-->
    <div id="back">  
    </div><!--/back-->
</div><!--/frontbackwrapper--> 

CSS 示例：

.modal {
    width: 800px;
    height: 568px;
    position: absolute; 
    left: 112px;
    z-index: 100;
    -webkit-transition-duration: 1s;
    -webkit-transform: translate3d(0,-618px,0); /* set off screen by default */
 }
.modal.modalOn {
    -webkit-transform: translate3d(0,80px,0); /* slides the div into place */
 }

如果——而不是使用translate3d——我只是用a重新定位divtop设计或改变top财产，我不明白偷看问题。当然，这意味着我必须分别放弃流畅的动画或硬件加速。

此时，它看起来像是一个 webkit bug。我会继续玩它。如果有人以前遇到过这个问题并找到了解决方法，我洗耳恭听！

解决方案！经过一夜的睡眠，我思考了罪魁祸首以及该如何处理。这不一定是使用translate3d 为子元素设置动画的行为，而是被翻译的元素在使用translate3d 对其父元素进行动画处理时具有该CSS 属性的情况。

解决方法是首先为子元素设置动画，然后一起删除翻译样式。

CSS 结构现在是：

/* default class for the start of your element */
.modal-startposition {
  -webkit-transition-duration: 1s;
  -webkit-transform: translate3d(0,-618px,0);
  }

/* add this class via jQuery to then allow
   webkit to animate the element into position */
.modal-animateposition {
  -webkit-transform: translate3d(0,80px,0);
}

/* when animation is done, remove the above class
   and replace it with this */
.modal-endposition {
  top: 80px;
}

还有一些 jQuery 示例：

//[attach a click event to trigger and then...]
$myModal
    .addClass("modal-animateposition")
    .on('webkitTransitionEnd',function () {
         $myModal
            .removeClass('modal-startposition')
            .removeClass('modal-animateposition')
            .addClass('modal-endposition');
    });

有点繁琐，但它完全解决了屏幕重画问题。

编辑：更正了一个错字