webkit translate3d问题（peek-thru） [英] webkit translate3d issues (peek-thru)

问题描述

我正在使用PhoneGap构建iOS应用。我使用translate3d CSS动画创建翻转效果。

I'm building an iOS app with PhoneGap. I'm using translate3d CSS animations to create the 'flip' effect.

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

This works great on simpler elements...a DIV with front/back divs and maybe an extra span or two.

但是当我试图翻转一个更大的元素，即整个屏幕，我得到重画毛刺。一旦我切换css类开始转换，部分底部div弹出顶部div，然后翻转发生，然后他们再次弹出，会发生什么。并不是整个元素通过...它是沿轴的元素拆分，我正在做翻译3d旋转。

But when I attempt to flip a larger element...namely the entire screen, I get redraw glitches. What happens as soon as I swap the css class to start the transition, parts of the 'bottom' div pop-through the 'top' div, then the flip happens, then they pop-out again. And it's not the entire element that shows through...it's half of the element split along the axis that I'm doing the translate 3d rotation on.

任何想法或关于什么可能导致这个的理论？它在iPad上作为应用程序和在Safari中的桌面上发生相同，所以似乎是一个webkit问题。

Any ideas or theories as to what might be causing this? It happens the same both on the iPad as an app and on the desktop in Safari, so appears to be a webkit issue.

这可能是一些CSS问题吗？或者是试图做一个全屏的translate3d旋转与复杂的嵌套元素与大的背景图片只是比Safari可以处理更多？

Could it be some CSS issues? Or is attempting to do a full-screen translate3d rotation with complex nested elements with large background images just more than Safari can handle?

更新1：

我在缩小问题上取得了进展。

I've made progress in narrowing down the issue.

发生的事情是，当我做

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

My 'page' structure that I want to transition with translate3d:

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

这是自己工作的。前面的div用一个卡片翻转效果替换后面的div。

This works on it's own. The front div is replaced with the back div with a card-flip effect.

问题是，在做全页翻转之前，我已经动画了 #front div using translate3d：

The problem is that prior to doing the full page flip, I've already animated some elements within the #front div using translate3d:

<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 - 我只是用顶部样式重新定位div，或者转换顶部属性，通过问题。当然，这意味着我必须放弃光滑的动画或硬件加速，分别。

If--instead of using translate3d--I just reposition the div with a top style or transform the top property, I don't get the peek-through issue. Of course, that means I have to give up the slick animation or hardware acceleration, respectively.

此时，它看起来像一个webkit错误。我会继续做一些玩。如果有人遇到这种情况，并找到一个解决方法，我很耳闻！

At this point, it looks like a webkit bug. I'll keep doing some playing with it. If anyone has run into this before and found a workaround, I'm all ears!

推荐答案

解决方案！经过一夜的睡眠，我仔细考虑了罪魁祸首和如何处理。它不一定是使用translate3d来动画子元素的行为，而是表示被翻译的元素在使用translate3d进行动画时的CSS属性。

solution! After a night of sleep, I mulled over the culprit and what to do with it. It's not necessarily the act of animating a child element with translate3d but rather the face that the element that was translated has that CSS property at the time it's parent is being animated with translate3d.

修复是先对子元素进行动画处理，然后一起删除翻译样式。

The fix is to first animate the child element, then remove the translate style all together.

现在的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：

And some sample 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');
    });

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

A little tedious, but it completely fixes the screen redrawing problem.

编辑：更正了拼写错误

这篇关于webkit translate3d问题（peek-thru）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！