Angular Ionic Capacitor | Why is Even a Simple Animation Laggy

Question

I'm building a simple Ionic Capacitor app with Angular.
The app includes a few pretty simple animations, and I'm stunned to learn these animations are incredibly laggy:

In the app, I have a list of contacts. When a contact is selected, the height of a div above the list is increased, and the list below is pushed down. Please refer to screenshots below.

This animation is implemented using Ionic's own animation library:

await this.animationController
    .create()
    .iterations(1)
    .addElement(document.querySelectorAll('.selected-contacts'))
    .duration(150)
    .fromTo('height', '0, '160px').play();

Simplified HTML:

<div class="container">
   <div class="selected-contacts"><!-- some stuff here --></div>
   <div class="list"> 
      <cdk-virtual-scroll-viewport> 
        <!-- List here --> 
      </cdk-virtual-scroll-viewport> 
   </div>
</div>

Playing this animation does the job, but its noticeable laggy, both on a new iPhone Pro and an older Android (pretty much same amount of lagging).

Question:
A simple height animation should not be laggy on a new iPhone, what am I doing wrong? Could it be that the underlying OS is only allocating a tiny fraction of resources to and Ionic Capacitor application? What am I missing here?

Disclaimer:
I know using translate, transform uses less CPU/GPU since the DOM is not rewritten here, but I still have a hard time to accept that a new iPhone cannot animate a height change without being laggy.

Answer 1

Animation the height property in any framework is not performant. Height requires the browser to need to re-layout the entire page and will always cause jank.

See CSS-Triggers for more details.

Using something like Transforms/Translate3D instead to create the effect you're looking for.

EDIT

Adding a link to a past talk from Liam DeBeasi about animations and performance.