When use snappable property dragging moveable element appear virtual line shadow, then disappear

[chenp1204]

Environments

• Framework name: Vue
• Framework version: 2.6.13
• Moveable Component version: 0.27.2 moveable
• Testable Address(optional):

Description

Hi @daybrush ,

When use snappable property, dragging moveable element appear virtual line shadow, after a few seconds disappear, but i don't know why, please give me a help......

The following is my moveable config:

this.moveable = new Moveable(this.canvasViewer.getViewport(), {
      draggable: true,
      resizable: false,
      keepRatio: false,
      origin: false,
      throttleDrag: 0,
      throttleResize: 0,
      snappable: true,
      horizontalGuidelines: this.horizontalGuides?.getGuides(),
      verticalGuidelines: this.verticalGuides?.getGuides(),
      snapThreshold: 5,
      isDisplaySnapDigit: true,
      snapGap: true,
      snapDirections: { left: true, top: true, right: true, bottom: true, center: true, middle: true },
      elementSnapDirections: { left: true, top: true, right: true, bottom: true, center: true, middle: true },
      elementGuidelines: [],
      snapDigit: 0,
    }).on('clickGroup', (e: OnClickGroup) => this.onClickGroup(e))
      .on('dragStart', (e: OnDragStart) => this.onDragStart(e))
      .on('drag', (e: OnDrag) => this.onDrag(e))
      .on('dragEnd', (e: OnDragEnd) => this.onDragEnd(e))

The phenomenon of my situation...

[John-K-2012]

Hi, I got the same issues. And I found a clue, this issue will be appeared when the moveable.zoom is not 1.

[John-K-2012]

I avoided this issues by another implementation. pls go through the following steps, hope it helpful for you.

1. to initialize the Moveable with zoom parameter is 1.
2. to initialize the horizontal/vertical Guides with proper zoom scaler (in my case, it's dynamically).
3. in the drag event of moveable, I setup position of dragging element by transform:translate(X,Y) or left/top, and the key point is that I Math.floor or Math.round the position parameters before applying it to dragging elements's CSS style.

The above steps works well in my case.

[chenp1204]

@John-K-2012 Thank you very much, i'll have a try ~

[chenp1204]

Hi @John-K-2012 I have try your steps,

1. set moveable zoom to 1
2. scaler in my case zoom is also dynamically.
3. use Math.round to get integer set css style

but in my case it's not work~ thank you

[daybrush]

@chenp1204 This is most likely a browser rendering bug. I don't know if there is a solution.

[helson-lin]

@chenp1204 how did you resolve it? i have got the same problem

[chenp1204]

@chenp1204 how did you resolve it? i have got the same problem

No, i can not resolve it yet

[daybrush]

@John-K-2012 @chenp1204 @helson-lin

Try adding outline: 1px solid transparent; css to your targets.

https://github.com/daybrush/moveable/issues/805#issuecomment-1335668498

[anxpara]

Pasting what i mentioned in the other related issue: "I've seen similar artifacts with animation libraries and I learned that the solution was to add "will-change: transforms;" to anything i planned on animating. maybe that also applies here?"

[chenp1204]

@John-K-2012 @chenp1204 @helson-lin

Try adding outline: 1px solid transparent; css to your targets.

#805 (comment)

Hi，@daybrush，i tried to resolve this problem according to your solution, but i don't know this style add to where......

[helson-lin]

you can try to force update dom , when you dragging component. in my case, i add a border style: 1px solid rgba(255,255,255,0) when component position changed, and settimeout about 100ms to change the border to 'none'