Sporadic behavior when drawing the touch points

[rfuehrer]

Environments

• Framework name: Vanilla
• Framework version: -
• Moveable Component version: 0.27.3
• Testable Address(optional): -

Description

I need your help. i am noticing a sporadic behavior that the handle points on multiple objects initiated with Moveable are not being drawn reproducibly on each refresh of a page. You can see the behavior in the graphic.

Here the handle points are partly...

(1) incorrectly displayed (adjustment points of the first object are displayed in the center, maybe the original position before arranged by CSS).

(2) handles for other objects are not shown at all (only after click)

(3) Touch points for all objects are displayed correctly.

All handle points are displayed correctly at the latest when you click on the corresponding object.

Steps to reproduce:

(1) Load gist https://gist.github.com/rfuehrer/100296478e1d6e441c638215723ac616 and place all files in a directory (2) Take one graphic, place it next to gist files and rename it to avatar.jpg (3) Add latest moveable.min.js (0.27.3) to directory (4) Open moveable_fail.html (5) Reload file several times in browser (6) Optional: Click object/touch points to activate object

Trying to execute the initiation with events DOMContentLoaded and load unfortunately did not need any improvement.

The behavior is traceable even with only one initiated object (#root1). in this case it may be worth mentioning that the position of the stray touch points is probably where the object would have been positioned if there are no other objects.

The first image has different dimensions for better clarity.

What can this be? Is this a timing problem and how could I prevent it? Can you help?

(edited due to possible concerns of image materials used)

[daybrush]

@rfuehrer

This has to do with display:flex and loading images.

I am going to use ResizeObserver, but I can detect size change, but it seems impossible to change position.

[daybrush]

@rfuehrer

• moveable 0.28.0
• react-moveable 0.31.1
• preact-moveable 0.30.0
• ngx-moveable 0.24.0
• svelte-moveable 0.18.0
• lit-moveable 0.5.0
• vue-moveable 2.0.0-beta.6
• vue3-moveable 0.3.0

moveable's new version is released. use useResizeObserver prop to true.