bug: accordion doesn't take into account content margin during expand animation

[kemp]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x
• Nightly

Current Behavior

When expanding an accordion that contains an item with a margin (such as ion-card) the animation is jerky because the max height does not include the margin. The issue is exacerbated when there are multiple cards within the accordion.

Expected Behavior

The animation should smoothly complete.

Steps to Reproduce

Create an ion-accordion-group and ion-accordion with an ion-card inside. Open the accordion and notice that the items below start to smoothly animate but jerk into place in the last instant.

Code Reproduction URL

https://stackblitz.com/edit/ionic6-angular13-ttmnlj?file=src/app/app.component.html

Ionic Info

Ionic:

Ionic CLI : 6.20.1 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 6.3.8
@angular-devkit/build-angular : 14.2.10
@angular-devkit/schematics : 14.2.10
@angular/cli : 14.2.10
@ionic/angular-toolkit : 6.1.0

Capacitor:

Capacitor CLI : 4.0.1
@capacitor/android : 4.5.0
@capacitor/core : 4.5.0
@capacitor/ios : 4.5.0

Utility:

cordova-res : 0.15.4
native-run : 1.7.1

System:

NodeJS : v16.18.1 (/home/work/.nvm/versions/node/v16.18.1/bin/node)
npm : 8.19.2
OS : Linux 6.0

Additional Information

The suspect source code line:

ionic-framework/core/src/components/accordion/accordion.tsx

Line 231 in 50e86e8

const contentHeight = contentElWrapper.offsetHeight;

An answer on StackOverflow to take into account margins of an element: https://stackoverflow.com/a/23749355/2544756

When searching for issues, I found this, but it's not related: #25879

I can work on a PR for this, I just want to confirm that it is something we want fixed.

[sean-perkins]

Hello @kemp thank you for reporting this issue!

We would happily welcome a PR contribution to resolve this issue. The animation would preferably be smooth when animating with content inside of it that includes a margin. We would just want to validate that taking additional measurements into the calculation of the max height (contentHeight) does not regress the animation in other scenarios.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.