ios - webkit translation3d问题(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替换为前div。

问题在于，在进行全页翻转之前，我已经使用translate3d对#front 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 */
 }

如果我只是使用top样式重新定位div或转换了top属性，而不是使用translate3d，则不会遇到偷看问题。当然，这意味着我必须分别放弃漂亮的动画或硬件加速。

此时，它看起来像是一个Webkit错误。我会继续做一些尝试。如果以前有人遇到过这种情况，并且找到了解决方法，那么，我真是不胜枚举!

最佳答案

解决方案!经过一夜的 sleep ，我仔细考虑了罪魁祸首及其处理方法。这不一定是用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');
    });

有点乏味，但是它完全解决了屏幕重绘问题。

编辑:更正了一个错字

关于ios - webkit translation3d问题(peek-thru)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/6564911/