Leftover elements on dragging nodes

[karan-kang]

Version Information

.NET Framework:         5.0
Blazor Hosting:         Server     
Z.Blazor.Diagram:       2.1.5   
Browser:                Edge 94.0.992.38               

[zHaytam]

Hello, I will need more information if possible.

• What is the content of your nodes (HTML or SVG)?
• Are those leftovers caused by nodes or links?
• How many elements (nodes/links) do you have in the diagram?

If you can provide a reproducible little example project, that would help me a lot!

[314159265meow]

Hi, I noticed this problem as well. It's not easy to reproduce reliably and seems to occur only at a very low zoom level. To me it looks like a browser render problem, maybe related to non-integer coordinates. So far I have no good idea how to fix it.

I managed to reproduce it at your demo page https://blazor-diagrams.zhaytam.com/demos/custom-group

Maybe this helps somehow.

[zHaytam]

I can also "sometimes" reproduce it in a very low zoom level and only when using CSS borders. When I remove the borders or replace it by something like box-shadow, then it doesn't happen.

Unfortunately I don't know exactly what the issue is, but the library doesn't do anything to cause it as far as I know...

[zHaytam]

@314159265meow Could you please try adding the following CSS and telling me if it still happens? Because for me, and for some reason I don't know, this fixes it:

.diagram-canvas {
    backface-visibility: hidden;
}

[314159265meow]

This fixes it for me as well. "In the old days" this was a trick to force the activation of hardware acceleration, not sure exactly how this works today.

I found another way to work around the issue. In the example of the custom group, it works if I set a border and a transparent outline, like this:

.group.custom {
  border: 2px solid black;
  outline: 6px solid transparent;
}

Also this problem doesn't seem to be related to this library, I managed to reproduce it in a single HTML file with 3 divs and a few lines of JavaScript.

[zHaytam]

Could you please send me the code you reproduced it with?

[314159265meow]

Sure, on the page you can use the mouse wheel to zoom and this produces the same artifacts for me. index.zip

[zHaytam]

Closing this since it's not related to the library, thanks!