Problem where Moveable leaves Traces

[thomaslichtenauer]

Environments

• Framework name: Vanilla JS
• Framework version:
• Moveable Component version: 0.40.1
• Testable Address(optional):

Description

Hello, I am using Infinite Viewer in combination with Moveable. Sometimes while dragging a Moveable around I encounter a problem where it seems so „leave traces“. The Moveable target is a simple HTML Div-Element with a 10px Border.

Do you know how to fix this issue?

[daybrush]

@thomaslichtenauer

1. Can you add css?

   .moveable-control-box {
   outline: 1px solid transparent;
   }

2. If not, try adding the following css to the target.

Try outline: 1px solid transparent;

Please let me know which method works. If not, let me know again.

[thomaslic]

Unfortunately that didn't fix the problem.

I am not sure if it has something to do with the moveable controlbox itself. As you can see on one of the attached Screenshots, whenever i hover over this Draggable Div-Element an :after Element gets visible. This also sometimes leaves traces.

I think it might have something to do with the scaling of the Infinite Viewer 🤔

FYI: I took the screenshots when the viewbox of the Infinite Viewer had the following transform and scale: transform: translate3d(-370.363px, -1269.24px, 0px) scale(0.390936)

[daybrush]

@thomaslichtenauer

Have you tried adding that css in :after?

[thomaslic]

I added it directly in :after and in the moveable targets div and now it seems to work without leaving traces!

thank you for your fast response and you help!!

[anxpara]

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]

@anxpara

Moveable element is applied

It can be effective when applied to the target.