Transform matrix is NaN and diagram is not displayed in tab



I have two websites. The first has an resource, displaying the bpmn viewer with a bpmn diagram importet via xml.
The second loads this resource in an iframe. The problem is, that the second website has two tabs and the iframe is on the second tab.
The bpmn resource is loaded and added to the DOM of the first website when the tabs are loaded (and the second tab is not visible when opening this site). When opening the second tab, the bpmn diagram is not visible, but the bpmn “frame” is. The diagram gets visible after dragging it the first time. I can see, that the transform matrix is (NaN NaN NaN NaN NaN NaN) in this scenario before dragging it.
Following screenshot shows the svg inside the djs-container.


If I wait with loading the iframe and attaching it to the DOM until the user clicks the second tab the matrix is (1 0 0 1 0 0 0) and the diagram is displayed. But I’d like to load the diagram before the user clicks the second tab. What can I do?


This is a known issue with things that are not actually in the DOM yet which results in NaN values. That’s also why your second approach works. Why would you want to render a diagram that is not visible yet?


It is just for performance issues because it might take a while to render the diagram. If I could do this, while the user is still on the first tab it would not load anymore when clicking on the second tab. Is there any workaround for this?