ionic-framework icon indicating copy to clipboard operation
ionic-framework copied to clipboard

bug: @ionic/react IonRouterOutlet breaks ChartJS animations

Open navalex opened this issue 9 months ago • 1 comments

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

navalex avatar Feb 20 '25 15:02 navalex