Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

bug: @ionic/react IonRouterOutlet breaks ChartJS animations #30201

Open
3 tasks done
navalex opened this issue Feb 20, 2025 · 0 comments
Open
3 tasks done

bug: @ionic/react IonRouterOutlet breaks ChartJS animations #30201

navalex opened this issue Feb 20, 2025 · 0 comments
Labels

Comments

@navalex
Copy link

navalex commented Feb 20, 2025

Prerequisites

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/@[email protected][email protected][email protected][email protected]/node_modules/@ionic/react)

Capacitor:

   Capacitor CLI      : 6.2.0
   @capacitor/android : 6.2.0 (/Users/alexandrenavaro/wdc_workspace/src/eveapp/node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@capacitor/android)
   @capacitor/core    : 6.2.0 (/Users/alexandrenavaro/wdc_workspace/src/eveapp/node_modules/.pnpm/@[email protected]/node_modules/@capacitor/core)
   @capacitor/ios     : 6.2.0 (/Users/alexandrenavaro/wdc_workspace/src/eveapp/node_modules/.pnpm/@[email protected]_@[email protected]/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

@ionitron-bot ionitron-bot bot added the triage label Feb 20, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant