ionic-team / ionic-team/ionic-framework
bug: IonContent breaks chart libraries
- Ngôn ngữ chính
- TypeScript
- Star
- 52.7k
- Fork
- 13.3k
- Merge trung bình
- 1 ngày 15 giờ
- Pull request đã merge (30 ngày)
- 51
Mô tả
### 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_
Hướng dẫn đóng góp
Hướng nghiên cứu
Start with the StackBlitz reproduction and read the comments in src/App.tsx, then compare chart initialization inside and outside IonContent. Reproduce the Chart.js and ECharts behavior and inspect the IonContent sizing or lifecycle involved. Done means responsive charts render correctly inside IonContent without fixed pixel dimensions or a timing workaround.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Đánh giá
- Công nghệ
- chart.js, react, typescript
- Lĩnh vực
- frontend
- Loại issue
- Lỗi
- Độ khó
- 4/5
- Thời gian dự kiến
- 3-5 ngày
- Mức độ hoạt động
- Đình trệ
- Độ rõ ràng
- Khá rõ ràng
- Mức phù hợp với người mới
- 35/100