IOSで非常に遅いCSS移行イベント

Question

私は、デスクトップブラウザとCordova/Phonegap経由でモバイルデバイス上で動作する単一ページのJavascriptアプリケーションを開発しています。

CSSトランジションを使用して実装されたスライドアウトメニューがあります。私はそれがデスクトップブラウザとアンドロイドでうまく動作することに気づいた。しかし、IOSでは重大なパフォーマンス上の問題があります。トランジションは時間通りに開始されるようには見えませんが、一度開始するとレンダリングとデュレーションが上手く見えます。移行の開始から移行終了までの時間は、他のプラットフォームよりもIOS上では高いです。たとえば、遷移の持続時間は300msですが、1500msの遷移イベントは得られません。その他のプラットフォームでは、私は325〜350msでtransitionendイベントを取得します。

Transitionendイベント：期待

• ：350msの
• 実際：1500ms

プラットフォーム：

• コルドバ6.3.1
• のXcode 8.1 GM種子
• IOS 10.1

ここには、メニューdivのCSSがあります。メニューをスライドアウトするには、 'open'クラスを追加します。メニューを閉じるには、私は 'オープン'クラスを削除します。私は 'left'プロパティと 'transform'プロパティで遷移しようとしましたが、結果は同じです。

/* Nav Menu */ 

#navmenu { 
    position: absolute; 
    top: 0; 
    width: 90%; 
    max-width: 400px; 
    z-index: 20; 
    height: auto; 
    background-color: white; 
    /* 
    -webkit-transform: translate3d(-100%,0,0); 
     -moz-transform: translate3d(-100%,0,0); 
     -ms-transform: translate3d(-100%,0,0); 
      transform: translate3d(-100%,0,0); 
    -webkit-transition: -webkit-transform 300ms ease; 
     -moz-transition: -moz-transform 300ms ease; 
     -ms-transition:  -ms-transform 300ms ease; 
     -o-transition:  -o-transform 300ms ease; 
      transition:   transform 300ms ease; 
    */ 
    left: -100%; 
    -webkit-transition: left 300ms ease; 
     -moz-transition: left 300ms ease; 
     -ms-transition: left 300ms ease; 
     -o-transition: left 300ms ease; 
      transition: left 300ms ease; 
} 

#navmenu.open { 
    /* 
    -webkit-transform: translate3d(0,0,0); 
     -moz-transform: translate3d(0,0,0); 
     -ms-transform: translate3d(0,0,0); 
      transform: translate3d(0,0,0); 
    -webkit-transition: -webkit-transform 300ms ease; 
     -moz-transition: -moz-transform 300ms ease; 
     -ms-transition:  -ms-transform 300ms ease; 
     -o-transition:  -o-transform 300ms ease; 
      transition:   transform 300ms ease; 
    */ 
    left: 0; 
    -webkit-transition: left 300ms ease; 
     -moz-transition: left 300ms ease; 
     -ms-transition: left 300ms ease; 
     -o-transition: left 300ms ease; 
      transition: left 300ms ease; 
} 

質問：IOSプラットフォームでのみ、移行の開始が遅れている原因は何ですか？問題を回避したり高速化するための既知の解決法はありますか？私は、アプリを使用できないようにするために、5秒以上かかる他のトランジションを持っています。メニューソリューションがアプリ全体に適用されることを願っています。あなたが提供できる助けやアイデアをありがとう。ここで

は

utilities.addEventListeners(navMenuButtonDiv, function() { 
    var start = Date.now(); 
    var menuDiv = navMenu.getDiv(); 
    if (menuDiv.classList.contains('open')) { 
     menuDiv.classList.remove('open'); 
    } else { 
     menuDiv.classList.add('open'); 
    } 
    var handler = function (event) { 
     console.log('Transition: ' + (Date.now() - start)); 
     menuDiv.removeEventListener('webkitTransitionEnd', handler, true); 
    }; 
    menuDiv.addEventListener('webkitTransitionEnd', handler, true); 
}; 

Answer 1

画面の周りの要素を移動し、パフォーマンスを最大化したい...私はメニューを閉じる/開くために使用インストルメントJavascriptのコードです。 leftプロパティを移行する代わりに、翻訳を使用する方がよいでしょう。変換を使用すると、デバイスはGPUを使用して、DOMの上のレイヤー上でオンスクリーンの変更をレンダリングします。これにより、よりスムーズでより効果的な移行が行われます。

この例を見てください。 leftプロパティを変更する代わりにtransformを使用する以外に、少し冗長性を取り除いたことに注目してください。アクティブ状態の遷移を再宣言する必要はありません。

var open = document.getElementById("open"), 
 
    close = document.getElementById("close"), 
 
    nav = document.getElementById("navmenu"); 
 

 
open.addEventListener("click", function() { 
 
    nav.classList.add("open"); 
 
}); 
 

 
close.addEventListener("click", function() { 
 
    nav.classList.remove("open"); 
 
});

#navmenu { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 90%; 
 
    max-width: 400px; 
 
    z-index: 20; 
 
    height: auto; 
 
    background-color: white; 
 
    transform: translate3d(-100%, 0, 0); 
 
    -webkit-transition: transform 300ms ease-in-out; 
 
    -moz-transition: transform 300ms ease-in-out; 
 
     -ms-transition: transform 300ms ease-in-out; 
 
     -o-transition: transform 300ms ease-in-out; 
 
      transition: transform 300ms ease-in-out; 
 
} 
 

 
#navmenu.open { 
 
    transform: translate3d(0, 0, 0); 
 
} 
 

 
button { 
 
    margin-top: 100px; 
 
}

<div id="navmenu">stuff in here</div> 
 
<button id="open">Open Menu</button> 
 
<button id="close">Close Menu</button>