dagre-d3
dagre-d3 copied to clipboard
[Workaround] HTML label failing to render in chrome
Some upcoming chrome change has caused html labels to stop rendering correctly. For example this page no longer works on chrome dev:
https://dagrejs.github.io/project/dagre-d3/latest/demo/interactive-demo.html
![](https://user-images.githubusercontent.com/1857794/178367225-91e91774-7cfb-4b3b-8a3b-de42c441d4db.png)
I believe the issue is with how chrome is rendering the foreignObject node when it is initially created.
Removing this line seems to fix the issue: https://github.com/dagrejs/dagre-d3/blob/10e37c786fd8d1162c052308bde67e6171b67543/lib/label/add-html-label.js#L8
If you can't remove the line, it appears you can force chrome to re-render it like this
document.querySelectorAll('foreignObject').forEach(x=>{
x.parentElement.style.display='none';
setTimeout(()=>{x.parentElement.style.display=''},1);
})