-
-
Notifications
You must be signed in to change notification settings - Fork 25
Description
Describe the bug
Plot component crashes with effect_update_depth_exceeded when placed inside a CSS-transformed container with scale factors above ~1.2. Works fine with smaller scales or no transforms.
To Reproduce
<div style="transform: scale(1.3);">
<Plot width={width} height={height}>
<AreaY data={someData} />
</Plot>
</div>
Then resize the plot dimensions - should crash within a second.
Stackblitz example (try playing around with different scale levels here: <div style="transform: translate(-290.3px, -379.35px) scale(1.3);">
Expected behavior
Should resize like 🧈
Desktop:
- Device: MacBook Pro
- OS: 15.3
- Browser Chrome
- Version 139.0.7258.154
Context
Using svelteplot inside svelte-flow nodes, which apply CSS transforms for positioning.
In addition
CSS transforms mess with DOM measurements. In my case, the bug's proness was directly related to svelte-flow's zoom level which is why I thought I was going crazy, eventually spending two whole days pinpointing this bug before realising it's obscured by svelteplot's internal reactivity.
Plot's internal reactive effects create a feedback loop between logical dimensions and measured dimensions when the scale discrepancy gets too large.
Removing bind:clientWidthfrom Plot.svelte didn't fix it, so the loop is deeper in Plot's reactive system
Related to #145 which also doesn't componsate for previous parent transforms up the DOM tree