Glitch while moving/zooming graph

[NemanjaRCT]

Sometimes I see this "glitch" while moving diagram around or zooming it. What could be potential reason of this and how to fix it?

This is my code:

this.chart = new OrgChart()
      .nodeId((dataItem: any) => dataItem.customId)
      .parentNodeId((dataItem: any) => dataItem.customParentId)
      .nodeWidth(() => 220)
      .nodeHeight(() => 100)
      .compact(false)
      .nodeContent((node: any) => {
        return `<div class="node-container" style="width:${node.width}px;height:${node.height}px"></div>`;
      })
      .linkUpdate(() => { select('#nodeDiagram .links-wrapper').attr('stroke', () => '#000') })
      .nodeUpdate((node: HierarchyNode<any>, index: number, nodes: HierarchyNode<unknown>[]) => {
        const componentRef = this.viewContainerRef.createComponent(DiagramNodeComponent);
        componentRef.instance.diagramNode = node.data;
        ...
        const content = componentRef.location.nativeElement;
        const nodeHTMLElement = (nodes[index] as unknown as HTMLDivElement);
        const containerHTMLElement = nodeHTMLElement.querySelector('.diagram-node-container');
        containerHTMLElement!.innerHTML = '';
        containerHTMLElement!.appendChild(content);
        select(nodeHTMLElement).select('.diagram-node-container').on('click', _ => { select(nodeHTMLElement).raise() });
      })
      .data(this.dataTest)
      .container('#nodeDiagram')
      .scaleExtent([0.5, 1])
      .render()

      HTML:
div class="col-12 border overflow-hidden">
                    <div #chartContainer style="width:100%; min-width: 500px; height:600px"
                        id="nodeDiagram"></div>
                </div>

[NemanjaRCT]

Seems like border was making the problem. When I switched to box-shadow: 0 0 0 1px black, glitch is gone

[bumbeishvili]

That's a known issue in Safari (happens when node content overflows the defined width and height)

https://github.com/bumbeishvili/org-chart/issues?q=safari