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

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…

[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?”

[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