DefaultLogoUrl gets an elipse

Hi! I am using
BABYLON.DefaultLoadingScreen.DefaultLogoUrl
If the browser window is small, the logo got 1:1 sized small to with Babylone 4.0

But with the actual 4.2 it gets an ugly egg
Screenshot 2020-09-01 at 10.57.09

Was there a change in BJS, I have to consider or is it a bug?
(I don’t know, if/how I could do a playground to show it)

Greetings
-karlos-

Please provide a repro in the PG as it will be easier to see what’s going on. Thanks!

Oh, I expected more trouble to write a PL because it shows the anyway.

Just resize the browser window to get the elipse:
https://www.babylonjs-playground.com/#WTEX40#7

Screenshot 2020-09-01 at 12.56.48

I will let @RaananW or @Deltakosh answer this one as it is related to svg/css.

When it worked (until 4.0), svg support was disabled and we executed the “non svg” code. Since then, the svg support is detected and if available some specific css are not applied anymore on the picture:

The issue is actually due to the default value of both the width and the height of the image. setting the image’s height to auto does the trick:

https://www.babylonjs-playground.com/#WTEX40#8

This is a temporary solution, I will see how we can provide access to those values and what are the consequences of actually setting the height value to auto instead of 20%

1 Like

Thank you for the quick workaround.
As I do it like BJS and use TypeScript, this is ok:

    const image = document.querySelector('#babylonjsLoadingDiv>img');
    if(image) (image.style as any).height = 'auto';

And ist must be done after! the displayLoadingUI.
Now it is a circle again. Well, the position isn’t in the center of the “ring of fire”. Your PG:
Screenshot 2020-09-01 at 17.46.24

Yep, they both need to be centered, and they very much depend on the size of your playground’s canvas. The quickest solution would be:

https://www.babylonjs-playground.com/#WTEX40#9

but the image will not be centered if it is not a square. I will work on a solution - would be great if you could create an issue on github for us to follow (you can link this discussion)

1 Like

With the actual workaround, the “Version String” may be hidden behind the logo.
The Z-order may be puzzled. (irrelevant if positions are fixed)

I actually added z-index to the text so that it will be ahead of the image. have you tried to commited version?

I was not sure how fast the preview is updated, but it is :slight_smile:
It looks fine now, than you

On full-screen, the text/version is hardly visible atop “inside” the logo
because its position is not “sized” (always moved below the logo)
There is no way to set the color/bold/size?

I’ll check and let you know :blush:

In the meantime you can check the structure of the html and use a well constructed query selector to get the text node. Then you can change anything in its style

2 Likes