How is position calculated?

[larissa-n]

Arrows move around DOM while scrolling and I can't figure out why. Haven't been able to reproduce in codesandbox yet, but I was hoping to get a hint here. How does absolute position get calculated?

Thank you!

[sasza2]

Hi! could you (just for testing purposes) move your arrow to document.body? does it work well when you do that?

[sasza2]

or you can check the latest version -> 1.2.0

[larissa-n]

Version 1.2.0 fixed it! That was fast, thank you!

The recalculating of the top-margin happens because it calculates element positions relative to viewport, and those change every scroll, correct (looking at source)? For rendering purposes, would it look any smoother to calculate distance relative to document boundaries (maybe like this), so the top-margin could be constant and react didn't need to re-render every scroll?

[sasza2]

You're welcome,

remember that getBoundingClientRect() according to docs is relative to viewport and arrows have position: absolute

The Element.getBoundingClientRect() method returns the size of an element and its position relative to the viewport.

https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

so when you scroll page, you've got to add it's current position. I will give you an example:

https://codesandbox.io/s/angry-kowalevski-i08t1

So it's still not looking smooth in 1.2.0? What browser was used on your example gif?

[larissa-n]

Electron app. Yes, I saw you used getBoundingClientRect, and positions relative to that change for every scroll position. React doesn't mind recalculating things half as much as re-rendering them, so I'm thinking if we bring document boundaries into the position calculation, although it may still have to re-calculate for every scroll, the total top-margin will be the same so it won't have to re-render. (And I could imagine it might help with pure js as well in cases where there's so much going on that the calculation starts to lag.)

[sasza2]

could you send me codesandbox with your example above? I'm just curios if it's not the case where props.from / props.to nodes change theirs positions

[larissa-n]

I see what you mean. Will try to recreate / isolate the problem (might be electron).

[sasza2]

okay, thanks

[larissa-n]

Isolated the issue: to create a custom titlebar in electron, body is overflow: hidden, and the main app div following the titlebar div has height: calc(100vh - 34px), in order to keep the scrollbar in the app div. That combination leads to react-arrows re-calculating absolute position with every scroll, since the arrows are positioned relative to the body div, but the body div doesn't itself scroll, to keep the scrollbar away from the titlebar.

Example: https://codesandbox.io/s/hardcore-lalande-ff1dc

This might be an edge-case and outside the scope, but would it help to keep the arrow spans positioned wherever they are instead of moving them up to body?

[sasza2]

thanks for isolating issue, I will think about it