ionic-team / ionic-team/ionic-framework

bug: @ionic/react IonRouterOutlet breaks ChartJS animations

Đang mở
#30,201 1 bình luận 0 reaction 0 người được giao Xem trên GitHub
triage
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

On a project using `React.js`, `Vite`, `Ionic` and `Chart.js` we can observe a weird interaction between the `IonRouterOutlet` and charts.
Even if the outlet has disabled animation, on loading the chart, it will make a really basic interaction, scaling the whole static chart from it top-left corner to it's normal scale, instead of for exemple growing each bars independently.

The current workaround I found is to more or less delay the adding of the chart in my DOM. In my app, I can even get rid of the setTimeout (check the exemple) and it works, probably because it takes a bit more time to load because of all my components.

### Expected Behavior

Don't know what the outlet should do, since I don't really know what it currently do. But the fact is it break the chartjs animations, and it should not.

### Steps to Reproduce

Go to the stackblitz project, and load the page.
The top chart is the current behaviour without my workaround. The second enables the setTimeout workaround.

### Code Reproduction URL

https://stackblitz.com/edit/vitejs-vite-1zdsn9jm?file=src%2FApp.jsx

### Ionic Info

```
Ionic:

Ionic CLI : 7.2.0 (/Users/alexandrenavaro/.npm-packages/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/react 8.4.2 (/Users/alexandrenavaro/wdc_workspace/src/eveapp/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 (/Users/alexandrenavaro/wdc_workspace/src/eveapp/node_modules/.pnpm/@capacitor+android@6.2.0_@capacitor+core@6.2.0/node_modules/@capacitor/android)
@capacitor/core : 6.2.0 (/Users/alexandrenavaro/wdc_workspace/src/eveapp/node_modules/.pnpm/@capacitor+core@6.2.0/node_modules/@capacitor/core)
@capacitor/ios : 6.2.0 (/Users/alexandrenavaro/wdc_workspace/src/eveapp/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 : v23.7.0 (/usr/local/bin/node)
npm : 10.9.2
OS : macOS Unknown
```

### Additional Information

_No response_

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Đánh giá

Issue này chưa được đánh giá.

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.