Canvas: Sluggish performance issue when multiple nodes enter/exit the view

A hacky solution is increasing the size of the wrapper canvas element using a .css snippet so that nodes aren’t removed/inserted at the canvas edges when moving around. Adding a css transition on the canvas element also reduces ‘choppiness’. You can even further enhance rendering performance by setting svg shape-rendering to optimizeSpeed.

.view-content:has(> .canvas-wrapper) {
  overflow: hidden;
}

.canvas-wrapper {
  width: 1000%;
  height: 1000%;

  left: -450%;
  top: -450%;

  .canvas {

    transition: transform 60ms ease;
    will-change: transform, scale, translate;

    > svg * {
      shape-rendering: optimizeSpeed;
    }
  }

  .canvas-controls {
    right: calc(45% + var(--size-4-2));
    top: calc(45% + var(--size-4-2));
  }

  .canvas-card-menu {
    bottom: calc(45% + var(--size-4-2));
  }
}

This snippet makes canvas navigation silky smooth on my not so beefy laptop.

11 Likes