Node material editor is not rendering the connections properly

[AlexDaniel]

If you look closely, the connections are rendered correctly within the frame container, but somehow it is not resized correctly:

• BabylonJS 6.14.0
• Browser Firefox, Chromium

Additional context
It used to work previously, I don't know why it just stopped. Could be because I updated BabylonJS, or maybe it has to do with something else.

Quick hack:
By setting:

width: 6000px;
height: 6000px;

On the <svg> element, I'm able to see all connections of my material.

[carolhmj]

Hello! We usually ask first to validate the issue on our forum first: https://forum.babylonjs.com/c/bugs/8
I haven't been able to reproduce this with a newly created Node Material, are you using any specific material? Are you running from nme.babylon.com, or on a local project?

[AlexDaniel]

Not reproducible on nme.babylon.com. Running locally with Vite. Happens with any material.

[carolhmj]

Can you share a repro of your project?

[AlexDaniel]

@carolhmj OK, I think I figured it out. So here's what's happening in my case.

I'm using Quasar. It turns out that it comes with some default CSS that works around some browser quirks. Specifically, there is an explicit overflow property set for svgs:

https://github.com/quasarframework/quasar/blob/b82b12846dd67e425d4c159e6b51100d703550ed/ui/src/css/normalize.sass#L57

/*
 * Hide the overflow in IE.
 */

svg:not(:root)
  overflow: hidden

It seems that the NME is expecting the opposite. So, to fix the rendering, I can simply add this to my CSS:

svg:not(:root) {
  overflow: visible !important;
}

Now, while it's easy to say that it's an issue in Quasar and not in BabylonJS, I'm not 100% confident about that, because pretty much everything else is working correctly except for node connections. Maybe it makes sense to change the NME layout a bit, so that the SVG is actually taking the size of the viewport?

[AlexDaniel]

Actually, I take it back 😇 See this: necolas/normalize.css#718

I think Quasar needs to update its normalize styles a bit. I'll create a ticket for that.