Closed rfuehrer closed 2 years ago
@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.
@rfuehrer
moveable
0.28.0react-moveable
0.31.1preact-moveable
0.30.0ngx-moveable
0.24.0svelte-moveable
0.18.0lit-moveable
0.5.0vue-moveable
2.0.0-beta.6vue3-moveable
0.3.0moveable's new version is released.
use useResizeObserver
prop to true.
Environments
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 latestmoveable.min.js
(0.27.3) to directory (4) Openmoveable_fail.html
(5) Reload file several times in browser (6) Optional: Click object/touch points to activate objectTrying to execute the initiation with events
DOMContentLoaded
andload
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)