Blazor.Diagrams icon indicating copy to clipboard operation
Blazor.Diagrams copied to clipboard

If diagram canvas margin-left is changed using a CSS transition, links are rendered with an offset

Open b43r opened this issue 3 years ago • 2 comments

I have a left navigation bar that collapses from 180px width to 50px width on small screen sizes. At the same time the left margin of the diagram canvas is changed by the same amount. I use the following CSS:

div.diagram-canvas {
    margin-left: 180px;
    transition: margin-left 0.5s;
}
@media (max-width: 991px) {
    div.diagram-canvas {
        margin-left: 50px;
    }
}

After that, links are rendered with an offset. This offset does not go away even if all nodes are removed from the diagram and added again:

grafik

But if I remove the transition: margin-left 0.5s; from my CSS everything is rendered fine.

b43r avatar Aug 22 '21 15:08 b43r

This looks weird. The ResizeObserver should be able to pick this change up, maybe the transition is messing with it. I'll investigate it and get back to you, thanks!

zHaytam avatar Aug 22 '21 21:08 zHaytam

Hello, when using your exact CSS, everything works well. I can't reproduce the issue, unfortunately... Do you have more information that you can give me?

zHaytam avatar Oct 31 '21 21:10 zHaytam