Skip to content

[BUG] Infinite reactive loop with CSS transforms at scale >> 1 #179

@lgrkvst

Description

@lgrkvst

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions