CSS-Übergangsereignisse extrem langsam auf IOS

Question

Ich entwickle eine einseitige Javascript-Anwendung, die auf Desktop-Browsern und auch auf mobilen Geräten über Cordova/Phonegap ausgeführt wird.

Ich habe ein Slide-Out-Menü, das mithilfe von CSS-Übergängen implementiert wird. Ich habe festgestellt, dass es gut auf Desktop-Browsern und Android funktioniert. Auf IOS gibt es jedoch ernsthafte Leistungsprobleme. Der Übergang scheint nicht rechtzeitig zu starten, aber sobald er beginnt, sieht das Rendering und die Dauer gut aus. Die Zeit zwischen dem Start des Übergangs und dem Ereignis transitionend ist auf IOS weit höher als auf anderen Plattformen. Zum Beispiel ist die Dauer des Übergangs 300ms, aber ich bekomme das transitionend -Ereignis nicht für 1500ms. Auf allen anderen Plattformen erhalte ich das Ereignis transitionend in 325-350ms.

Transitionend Veranstaltung:

• Erwartet: 350ms
• Aktuell: 1500 ms

Plattformen:

• Cordova 6.3.1
• Xcode 8.1 GM Seed
• IOS 10.1

Hier ist das CSS für das Menü div. Um das Menü auszublenden, füge ich die Klasse "open" hinzu. Um das Menü zu schließen, entferne ich die "offene" Klasse. Ich habe versucht, über die Eigenschaft 'links' und 'Transform' zu übergehen, aber die Ergebnisse sind identisch.

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

Frage: Was könnte die Verzögerung beim Starten des Übergangs verursacht, nur auf IOS-Plattformen? Gibt es bekannte Lösungen, um das Problem zu umgehen oder die Dinge zu beschleunigen? Ich habe andere Übergänge in der App, die über 5 Sekunden dauern, um zu starten, was die App unbrauchbar macht. Ich hoffe, dass die Menü-Lösung in der gesamten App Anwendung findet. Vielen Dank für Ihre Hilfe oder Anregungen.

Hier ist die instrumentierte Javascript-Code, die ich benutze zum Öffnen/Schließen des Menüs ...

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

Wenn Elemente auf dem Bildschirm zu bewegen, können Sie die Leistung maximieren wollen. Anstatt die Eigenschaft left zu übergehen, sollten Sie die Übersetzung besser nutzen. Bei der Übersetzung verwendet das Gerät seine GPU, um die Änderung auf dem Bildschirm auf einer Ebene über dem DOM zu rendern. Dies führt zu einem glatteren, performanteren Übergang.

Schauen Sie sich dieses Beispiel an. Neben der Verwendung einer transform anstelle der Änderung der left Eigenschaft, beachten Sie, dass ich ein wenig Redundanz entfernt. Sie müssen den Übergang im aktiven Zustand nicht erneut deklarieren.

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>