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.