Why do I need to add<img>tags in the dom when creating a babylonjs gui image? And it's not display: none. This will affect the layout

Why do I need to addtags in the dom when creating a babylonjs gui image? And it’s not display: none. This will affect the layout.

Hello :slight_smile:

Oh, I had never noticed that GUI was adding img tags to the DOM…
My guess is that it’s done in order to let the browser dealing with loading+caching stuffs… Maybe I’m wrong, to be confirmed by devs :grin:

Since it’s position:absolute, I would say it should not affect that much the layout… Do you have issue with tag affecting your layout outside of the canvas context in your app ? :thinking:

++
Tricotou

yep! it won’t… optically at least, but it can fool your css selectors…

huh! that shouldn’t happen. Assigned to me already, i’ll check it tomorrow™

3 Likes

I’m also tracking this issue.
As of 7.10.3 theres scrollbars in our app around our 3d area because of img elements being added to the dom for image controls in babylon UI.

This PR seems to be the reason

“To enforce rendering”, the img (this was made for SVG) is added to the DOM at the parent node of the canvas.
Since our rendering canvas has a parent container, im just gonna hide scrollbars & limit height of container on that until this is fixed.

I also thought that position: absolute makes it outside the DOM (to the nearest position: relative). I didnt know you HAD to add top/bottom/left/right. Adding top: 0 makes this behave as expected.

However I believe that could cause it to render overtop of the canvas. Default “z order” is determined by DOM order (later in dom is higher). I guess maybe that’s not happening in this case, or or app has something else somewhere that prevents this (none i can see).

For now, appears to be safe to simply hide scrollbars and limit the height of the container.

2 Likes

Thanks a lot. Wonderful research :slight_smile:
I’m looking into that very soon and hopefully will find a solution. I will be off for the rest of the week so if I don’t solve it today it will have to wait for the next minor version.

1 Like

I believe this is a good solution - changes to image adding when using Image in GUI by RaananW · Pull Request #15260 · BabylonJS/Babylon.js (github.com) , but I will wait for @Deltakosh for review.

Yes I agree only SVG needs to be added to get resolved (size wise)

thanks a lot @RaananW

1 Like

This could need a little more to avoid changing the layout:

this needs to have something like “top: 0” or this will change the page layout and increase height of parent container.
also quality check: ensure these images are not appearing overtop of the canvas. Prepend them to the parent container to ensure they are before the canvas/3d view. Because of native z layering which is determined by ascending order (afaik, from past experience), that will cause them to always be underneath the canvas.

concern is that there’d be a scrollbar appearing briefly due to this. Not 100% sure if it would be observed by the user, but its highly likely if the onload is an async callback with time to render the page in between.
A screenshot regression test will not reveal the temporary layout change if its only taken at the end. A video would of course.

Ty for the fix tho! :heart:

The image is added on the same frame right after it is rendered. Does it still change the layout?

Haven’t had a chance to test that commit.
As far as I know, without top: 0 it will appear below the above things like a canvas. In our app it did. Just position: absolute isnt enough. I tested this.

If you don’t see layout change then perhaps its fine, but adding something like top: 0 (or some other position) would be extra safety.

Now that I think about it, you’re best off adding it to the body instead of a container. If the 3d view is smaller than the size of that image, then I think could also cause a layout change even if position absolute is in play. Not 100% sure about that.

i don’t mind adding top: 0. The way things are done has changed in the last PR, so I doubt there will be any different between the two - whether it is added to the canvas, the body or not, as it is removed right after it is added, synchronously. But again - I will make sure to add top: 0 to be sure everything works as expected.

1 Like