我正在使用PhoneGap构建iOS应用程序。我使用translate3d CSS动画来创建“翻转”效果。
这在简单的元素上运行得很好...一个带有前/后div和可能有一两个额外span的DIV。
但是当我尝试翻转一个更大的元素...即整个屏幕时,我会遇到重绘故障。当我交换css类以开始过渡时,'底部' div的某些部分会穿过'顶部' div,然后发生翻转,然后它们再次弹出。而且不是整个元素都显示出来...它沿着我进行translate3d旋转的轴分成了元素的一半。
对于可能导致此问题的原因或理论有任何想法吗?它在iPad上作为应用程序和在Safari中的桌面上都是相同的,因此似乎是Webkit问题。
这可能是一些CSS问题吗?还是尝试使用具有大型背景图像的复杂嵌套元素进行全屏translate3d旋转只是超出了Safari的处理能力?
更新1:
我已经在缩小问题范围方面取得了进展。
正在发生的事情是,当我执行translate3d翻转时,“窥视”的元素恰好是之前通过translate3d定位的子元素。
我要使用translate3d过渡的“页面”结构:
如果我不使用 translate3d,而是用
此时,看起来像是一个 Webkit 的 bug。我将继续尝试解决。如果有人遇到过这个问题并找到了解决方法,我非常乐意听取!
这在简单的元素上运行得很好...一个带有前/后div和可能有一两个额外span的DIV。
但是当我尝试翻转一个更大的元素...即整个屏幕时,我会遇到重绘故障。当我交换css类以开始过渡时,'底部' div的某些部分会穿过'顶部' div,然后发生翻转,然后它们再次弹出。而且不是整个元素都显示出来...它沿着我进行translate3d旋转的轴分成了元素的一半。
对于可能导致此问题的原因或理论有任何想法吗?它在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。
问题在于,在进行整个页面翻转之前,我已经使用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 */
}
如果我不使用 translate3d,而是用
top
样式重新定位 div 或者改变 top
属性,我就不会出现窥视问题。当然,这意味着我必须分别放弃流畅的动画或硬件加速。此时,看起来像是一个 Webkit 的 bug。我将继续尝试解决。如果有人遇到过这个问题并找到了解决方法,我非常乐意听取!