[BUG] Joystick not appearing in correct location when used in the svelte framework about nipplejs

[stoddabr]

I found a resolution by calculating the bounding box of the parent.
This was done by changing lines ~125-130 of collection.js in function createNipple :

    var zone = self.options.zone;
    var parentRect = zone.getBoundingClientRect();
    console.log(parentRect.top, parentRect.right, parentRect.bottom, parentRect.left);

    if (position.x && position.y) {
        toPutOn = {
            x: parentRect.left + position.x -
                (scroll.x + self.box.left),
            y: parentRect.top + position.y -
                (scroll.y + self.box.top)
        };

Before I go through the effort of making a pull request, I just want to check in with people who know this project better than me to make sure this is a sensible solution that won't cause weird edgecases. I don't really understand the expected behavior or when position.x and position.y will be falsy so I don't know if parentRect.left & parentRect.left should be added in the other cases as well.

Here's a repl of the full code with changes working as expected: https://svelte.dev/repl/bbd65fbe0e5b4898a291e924dfb51db0?version=3.46.4

[yoannmoinet]

Thanks for the details and the repro!
The issue with your solution is that we're computing and using parent's position twice (see parentRect.top and self.box.top).

I think everything resides on how the position of the zone is computed by the browser, due to display: flex.
Basically, if you removes the + self.box.top and + self.box.left from the initial code, you'd fix the issue in your context.

But, we have to understand why it's doing that when using display: flex.

I'm checking a bit more.

[yoannmoinet]

Created #182, let me know if that fixes your issue.

[yoannmoinet]

Released in v0.9.1

[dellwatson]

this still doesnt solve the problem unfortunately