Dom nodes is not deleted properly

Hey Guys,
Looks like i found new memory leak

I use angular for development and i have angular component which creates babylon scene. Everytime i create this component i see that number of DOM nodes increased by 2. I found which line is doing this.

this.assetsManager.addMeshTask(’’, ‘’, ‘assets/’, ‘x.glb’);

When this line is commented everything is fine: number of DOM elements is the same after GC. When it’s not commented everytime i create this component number of DOM elements +2 after GC.
(Even if i have this line multiple times i still have +2)

I checked that my angular component is successfully deleted in memory dump in both cases. Also i tried to use engine.dispose() scene.dispose() and even assetsmanager.reset()

P.S. Without this line i have 135 nodes. With line i have 170 nodes +2 each time.

Not sure how to reproduce it on playground
Any thoughts?

Wait, we are not supposed to add any DOM node from babylonjs. We definitely need more detail on which nodes are added for sure

Update:

Compared HTMLs from both cases and found that it’s a next nodes:

@-webkit-keyframes spin1 { 0% { -webkit-transform: rotate(0deg);} 100% { -webkit-transform: rotate(360deg);} } @keyframes spin1 { 0% { transform: rotate(0deg);} 100% { transform: rotate(360deg);} }

Each time i create component each time babylon add them to the DOM regardless they are already there

I found that this classes are used in babylon spinning picture during loading of scene. Proof of that i disabled loading screen assetsManager.useDefaultLoadingScreen = false; and issue disappeared.

Before that i tried to add only one task to assetesmanager to understand issue and when line was commented no loading screen showed. so it’s confused me.

Finally: Problem is that babylon tries to add style for spinning picture to the DOM even if it was already added

UPD: found where it is added

// Generating keyframes
var style = document.createElement(‘style’);
style.type = ‘text/css’;
var keyFrames =
@-webkit-keyframes spin1 {\ 0% { -webkit-transform: rotate(0deg);} 100% { -webkit-transform: rotate(360deg);} }\ @keyframes spin1 {\ 0% { transform: rotate(0deg);} 100% { transform: rotate(360deg);} };
style.innerHTML = keyFrames;
document.getElementsByTagName(‘head’)[0].appendChild(style);

1 Like

Yes this is what I thought :slight_smile: You can simply not using the Loading Screen

You can also go ahead and create a repo issue for me on Github so I will fix that tiny leak

i’ve created

2 Likes