Performance issue with built-in canvas plugin

Bug reports
1

Steps to reproduce

  • create new vault
  • create canvas
  • add 100 single line text cards
  • pan the canvas

Did you follow the troubleshooting guide? Yes

Expected result

No significant freezes

Actual result

Every time some elements are appear/dissapear from the viewport there are noticable freezes. But when all elements are present on the viewport, panning makes no freezes.

Video example

Environment

SYSTEM INFO:
Obsidian version: v1.4.14
Installer version: v1.1.9
Operating system: Windows 10 Home 10.0.19045
Login status: not logged in
Insider build toggle: off
Live preview: on
Legacy editor: off
Base theme: dark
Community theme: none
Snippets enabled: 0
Restricted mode: on
AMD Ryzen 5 4600U

Also checked on another machine, with fresh Obsidian install, with the same result:
AMD Ryzen 9 5900x + GeForce RTX 3060 (200 text cards are required to get the same performanse issue)

Additional information

I’m guessing it is because some internal optimisation takes place when the element dissapears from the viewport, but instead of helping the performance it worsens it

Yes, I know, 100 notes is a big amout, but depending on the machine that kind of problem may appear on 40+ notes, which is a reasonable amount. I expect the performance to be comparable to the graph view, where you can have 1000+ notes with the title shown, without any performance issues.

Thank you for developing Obsidian!

1 Like
2

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.

2 Likes