Skip to content

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

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

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

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