Canvas drawing alignment problems when far from origin

Bug reports
,
1

I have used the canvas feature to make a timeline for my story planning stuff. I have some backgrounds that I use in groups to measure out months, days, etc. This is working in a lovely manner, but it has surfaced a few alignment problems with the canvas rendering code.

Steps to reproduce

  1. From a new canvas, scroll very far from the origin (like several seconds) and make a few cards and connect them with arrows. (My canvas is a timeline with 100px per day, so by December I’m at y=36000.)
    • Alternately, use the canvas json I pasted at the bottom.
  2. Observe results.

Did you follow the troubleshooting guide? [Y/N]

Yes, I did this in the sandbox vault.

Expected result

I expected the arrows and cards to align properly like they always do.

Actual result

The arrows seem to be suffering from some sort of float precision problem, where they’re being drawn further offset from the cards the further from the origin of the canvas you go. If you’re at y=36000, the arrows are shifted downward several pixels. At y=-36000, they’re shifted upward, etc. This also affects alignment lines when moving a box. See screenshot below.

Environment

SYSTEM INFO:
	Obsidian version: v1.5.12
	Installer version: v1.5.3
	Operating system: Windows 10 Pro 10.0.19043
	Login status: not logged in
	Insider build toggle: off
	Live preview: on
	Base theme: adapt to system
	Community theme: none
	Snippets enabled: 0
	Restricted mode: on

RECOMMENDATIONS:
	none

(I’ve also seen this on my Mac.)

Additional information

Screenshot and canvas json used in this screenshot:
image

{
	"nodes":[
		{"id":"6f93b37b3b3430b3","type":"text","text":"Bar","x":48,"y":36022,"width":250,"height":60},
		{"id":"471f888ea2573981","type":"text","text":"Foo","x":-266,"y":36022,"width":250,"height":60},
		{"id":"f10c524ffce1eb55","type":"text","text":"Arrows are offset weird","x":48,"y":36166,"width":250,"height":60},
		{"id":"a9c991895d14d933","type":"text","text":"Move this, observe offsets","x":-266,"y":36166,"width":250,"height":60}
	],
	"edges":[
		{"id":"e25d034174f04922","fromNode":"6f93b37b3b3430b3","fromSide":"left","toNode":"471f888ea2573981","toSide":"right"},
		{"id":"aaf2cbeff24f9c68","fromNode":"6f93b37b3b3430b3","fromSide":"bottom","toNode":"f10c524ffce1eb55","toSide":"top"}
	]
}
1 Like
2

I can reproduce this.

It only seems to affect Y, as far as I can tell. I tried it with much larger X values and don’t notice any horizontal offset.

It doesn’t quite seem like floating point precision issue to me. It seems to happen pretty linearly as a coordinate offset. Even at 1600 to -1600 you start to see it. This gif is switching between a 1600 and -1600 Y offset:

canvasOffset

3

Confirmed over the weekend that the issue is present on my Mac as well, but it actually seems to be flipped from what I described on the windows version? Like at negative numbers, the arrows are shifted down, and at positive, they’re shifted up.

Scratch that, I was on 1.4.16 on my Mac. I relaunched to update it and now the arrows are shifting the same way as on Windows on 1.5.12. The offset seems much less pronounced, however.

Okay, no, it’s the same across platforms, but the offset problem seems to be related to the size of the Obsidian window. Full screen on my Mac is just a different size to full screen on my PC. You can see the problem in real time if you just resize the window:
ObsidianArrows

1 Like