Laggy Performance on iOS about angular-gsapify-router HOT 3 CLOSED

Hi,

I think you've nailed what the problem is and why it is anim-in-out doesn't suffer the problem so much. Generally I've found performance to be similar except in these instances where there is a significant amount of processing/DOM manipulation happening, unfortunately this is exaggerated on less performant devices.

My workaround for this has been to delay the transition so that it (hopefully) occurs after the DOM has been built etc. Alternatively you can delay the rendering of the heavier elements in your page by using events to trigger them after transitions are finished.

Of course using transform instead of position (left, right, top, bottom) helps. You may like to try the CSS will-change property.

I use the profiles section of dev tools to figure out where and why some frames exceed the 16ms threshold, this might provide some clarity on where to focus your optimisations.

Hope this helps

James

from angular-gsapify-router.

FWIW I've seen this now occurs in OSX Safari too. I'll investigate when I have a moment, let me know if you managed to resolve somehow. Thanks

from angular-gsapify-router.

As a partial fix for this I've added an option to delay the transition until a trigger event is fired on the $rootScope.

Add the following to your route configuration (in the data.gsapifyRouter[VIEW_NAME][enter|leave][in|out]:

// add event listener to $rootScope to trigger transition
trigger: 'viewInitialised'

Then in your view controller:

// broadcast event when view has been initialised
// eg. when expensive layout components/directives have done their thing
$rootScope.$broadcast('viewInitialised');

from angular-gsapify-router.