ios – webkit translate3d问题(peek-thru)

概述我正在使用PhoneGap构建iOS应用程序.我正在使用translate3d CSS动画来创建“翻转”效果. 这对于更简单的元素非常有用……带有前/后div的DIV,可能还有一两个额外的跨度. 但是当我试图翻转一个更大的元素…即整个屏幕时,我会重绘毛刺.一旦我交换css类开始转换会发生什么,’bottom’div的部分d出’top’div,然后翻转发生,然后它们再次d出.并且它不是显示的整个元素 我正在使用PhoneGap构建iOS应用程序.我正在使用translate3d CSS动画来创建“翻转”效果.

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

但是当我试图翻转一个更大的元素…即整个屏幕时,我会重绘毛刺.一旦我交换CSS类开始转换会发生什么,’bottom’div的部分d出’top’div,然后翻转发生,然后它们再次d出.并且它不是显示的整个元素……它是沿着轴分割的元素的一半,我正在进行平移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替换,具有卡片翻转效果.

问题是在进行整页翻转之前,我已经使用translate3d在#front div中设置了一些元素：

<div ID="frontbackwrapper">    <div ID="front">          <div ></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 – 我只是重新定位顶部样式的div或转换顶部属性,我没有得到偷看问题.当然,这意味着我必须分别放弃光滑的动画或硬件加速.

此时,它看起来像一个webkit错误.我会一直在玩它.如果有人在此之前遇到过这种情况并找到了解决方法,我全都听见了！

解决方法 解！经过一夜的睡眠,我仔细考虑了罪魁祸首以及如何处理它.它不一定是使用translate3d为子元素设置动画的行为,而是在翻译的元素在使用translate3d对其父级进行动画处理时具有该CSS属性的面部.

修复方法是首先为子元素设置动画,然后一起删除翻译样式.

CSS结构现在是：

/* default class for the start of your element */.modal-startposition {  -webkit-Transition-duration: 1s;  -webkit-transform: translate3d(0,0);  }/* add this class via jquery to then allow   webkit to animate the element into position */.modal-animateposition {  -webkit-transform: translate3d(0,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 translate3d问题(peek-thru)全部内容，希望文章能够帮你解决ios – webkit translate3d问题(peek-thru)所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。