ionic-team / ionic-team/ionic-framework

bug: IonContent breaks chart libraries

Ouverte
#30,297 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub
triage
Langage dominant
TypeScript
Étoiles
52.7k
Forks
13.3k
Merge moyen
1 j 15 h
PR mergées (30 j)
51

Description

### Prerequisites

- [x] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#creating-an-issue).
- [x] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [x] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/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 `` (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 `` 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_

Guide de contribution

Ouvrir le guide de contribution

Évaluation

Cette issue n'a pas encore été évaluée.

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.