javascript - evenimente de tranziție CSS extrem de lente pe IOS

Dezvolt o aplicație Javascript cu o singură pagină care rulează pe browsere desktop și, de asemenea, pe dispozitive mobile prin Cordova/Phonegap.

Am un meniu derulant care este implementat folosind tranziții CSS. Am observat că funcționează bine pe browserele de desktop și pe Android. Totuși, pe iOS există probleme serioase de performanță. Tranziția nu pare să înceapă la timp, dar odată ce începe, redarea și durata par normale. Timpul dintre începerea tranziției și evenimentul transitionend este mult mai mare pe iOS decât pe alte platforme. De exemplu, durata tranziției este de 300 ms, dar nu primesc evenimentul transitionend decât după 1500 ms. Pe toate celelalte platforme, primesc evenimentul transitionend în 325-350 ms.

Evenimentul Transitionend:

• Așteptat: 350ms
• Actual: 1500ms

Platforme :

• Cordova 6.3.1
• Xcode 8.1 GM Seed
• IOS 10.1

Iată CSS-ul pentru div-ul meniului. Pentru a glisa meniul, adaug clasa 'open'. Pentru a închide meniul, elimin clasa 'open'. Am încercat să fac tranziții pe proprietatea 'left' și pe proprietatea 'transform', dar rezultatele sunt identice.

/* 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;
}

Întrebare: Ce ar putea cauza întârzierea începerii tranziției, numai pe platformele IOS? Există soluții cunoscute pentru a evita problema sau pentru a accelera procesul? Am alte tranziții în aplicație care durează peste 5 secunde pentru a începe, făcând aplicația inutilizabilă. Sper că soluția cu meniul se va aplica în întreaga aplicație. Mulțumesc pentru orice ajutor sau sugestii pe care le puteți oferi.

Iată codul JavaScript instrumentat pe care îl folosesc pentru a deschide/închide meniul...

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);
 };

Răspuns #1

Când mutați elemente pe ecran, doriți să maximizați performanța. În loc să faceți tranziția proprietății left, este mai bine să folosiți translatarea. Folosind translatarea, dispozitivul va folosi GPU-ul pentru a reda modificarea de pe ecran, pe un strat deasupra DOM-ului. Acest lucru va rezulta într-o tranziție mai lină și mai performantă.

Aruncă o privire la acest exemplu. Pe lângă utilizarea unui transform în loc să schimbi proprietatea left, observă că am eliminat puțină redundanță. Nu este nevoie să redeclari tranziția pe starea activă.

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>