webkit translate3d問題（偷看）

我正在用PhoneGap構建iOS應用程序。我正在使用translate3d CSS動畫來創建「翻轉」效果。webkit translate3d問題（偷看）

這對於更簡單的元素很有效......一個DIV與前/後divs，也許一個額外的跨度或兩個。

但是，當我試圖翻轉更大的元素，即整個屏幕，我得到重繪毛刺。當我交換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 #front使用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 */ 
}

If--而不是使用translate3d - 我只是重新定位div的top風格或轉換top屬性，我沒有得到偷看問題。當然，這意味着我必須分別放棄漂亮的動畫或硬件加速。

在這一點上，它看起來像一個webkit的bug。我會繼續玩一些。如果有人遇到過這種情況，並找到了解決辦法，我全是耳朵！

來源

2011-07-03 DA.

解決方案！經過一夜的睡眠之後，我仔細考慮了肇事者以及如何處理這件事。這不一定是用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'); 
    });

有點乏味，但它完全修復了屏幕刷新問題。

編輯：修正了一個錯字

來源

2011-07-07 14:32:20

@IanJamison我知道這個答案現在已經有好幾年了，但是我不知道把'one'改爲'on'是正確的。 'on'基本上和我所理解的一樣（只要有人打電話），但它不會在完成時刪除事件處理程序。我真的不記得這是否會在這個特定的應用程序中發揮作用，但似乎有時候有一個非常有意的理由與一個人對比。 –

DA，我從這件事吸取的東西，謝謝。此外，注意到css attrbibutes，'translate3d'和'left'。翻譯和定位有點不同。測試一下，在x軸上翻譯一個100px的元素，將它的'left'樣式屬性設置爲0px。驗證，它將位於x軸上當前轉換點的x軸上（從x軸上的100px開始）。

這會在拖放和動畫算法中產生數學錯誤，並且容易被注意到（重繪故障，跳過，重置位置），併成爲一個挑戰，因爲translate3d不再更新元素offsetLeft或'left'樣式屬性（以防止迴流，進行優化），因此解析真正剩下的元素是基於瞭解是否正在使用translate3d或left。如果你是一名遊戲開發者，跟蹤內部變量中的x，y是與元素位置保持同步的方式。希望幫助更多。

來源

2012-12-03 14:04:01 jaysmith024

webkit translate3d問題（偷看）

回答

相關問題