ionic-team / ionic-team/ionic-framework

bug: @ionic/react IonRouterOutlet breaks ChartJS animations

Abierto
#30,201 1 comentario 0 reacciones 0 asignados Ver en GitHub
triage
Lenguaje dominante
TypeScript
Estrellas
52.7k
Forks
13.3k
Merge medio
1 d 15 h
PR fusionados (30 d)
51

Descripción

### 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_

Guía de contribución

Abrir la guía de contribución

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.