search

dagrejs / dagre-d3

A D3-based renderer for Dagre
MIT License
2.85k stars 587 forks source link

[Workaround] HTML label failing to render in chrome #431

Open itszn opened 2 years ago

itszn commented 2 years ago

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

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);
})