bug: IonContent breaks chart libraries

[navalex]

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

v8.x

Current Behavior

I'm trying to implement a Chart library for my app. I first tried Chart.js, and now ECharts. On both, I'm experiencing bad behaviours when it is inside a <IonContent> (nested or not, problem is the same).

For Chart.js, the content managed to shows up, but with a strange animation of the chart growing from top left, like if the container was first at 0 height or width.

For ECharts, the chart will just not shows up if there is not explicit pixels width AND height.

The first workaround found was to put their init inside a setTimeout at tiny delay (it sometimes works even with a 0 delay, not sure why). Then I just tried to remove the <IonContent> container, and it fixed both.

My conclusion is: ion-content do something that I don't get, with it size, that seems to break canvas-responsive libraries.

Do you know if I can just not use the ? I do want to do a tab navigation with headers etc.

Expected Behavior

Charts should show even if inside a which seems to be a basic container.

Steps to Reproduce

The stackblitz shows by default a white page. Inside the App.tsx I added comment to explain how to test the fix. You can also try to add the chart init inside a setTimeout with a IonContent, it should also works.

Code Reproduction URL

https://stackblitz.com/edit/p3pckzwk?file=src%2FApp.tsx

Ionic Info

Ionic:

   Ionic CLI       : 7.2.0 (/src/node_modules/.pnpm/@ionic+cli@7.2.0/node_modules/@ionic/cli)
   Ionic Framework : @ionic/react 8.4.2 (/src/node_modules/.pnpm/@ionic+react@8.4.2_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@ionic/react)

Capacitor:

   Capacitor CLI      : 6.2.0
   @capacitor/android : 6.2.0 (/src/node_modules/.pnpm/@capacitor+android@6.2.0_@capacitor+core@6.2.0/node_modules/@capacitor/android)
   @capacitor/core    : 6.2.0 (/src/node_modules/.pnpm/@capacitor+core@6.2.0/node_modules/@capacitor/core)
   @capacitor/ios     : 6.2.0 (/src/node_modules/.pnpm/@capacitor+ios@6.2.0_@capacitor+core@6.2.0/node_modules/@capacitor/ios)

Utility:

   cordova-res : not installed globally
   native-run  : not installed globally

System:

   NodeJS : v20.18.1 (/usr/local/bin/node)
   npm    : 10.8.2
   OS     : Linux 6.10

Additional Information

No response