I’ve been working with a layout that has a babylonjs area to display a render of a window on a roof. It is shown within an area, and is not the whole screen.
The layout has since been changed and I now need to use flex elements to size the relevant columns.
One column is fixed, the other is fluid (containing the render).
| Column A (fixed) | Column B (fluid, with render taking up 100%) |
I’m not sure exactly what’s going on, but the babylon render seems “calculate/correct” its size BEFORE the flex arrangement, and thus messes up the resultant column content size. It renders it far too big, pushing the other columns away.
To be clear: this is even with a forced/fixed column size.
Importantly: on resize, this is fixed. Columns align correctly.
I’ve added the following but it doesn’t seem to work:
Unfortunately this seems to a real bug here. I’ve found a work around, but it’s definitely a thing:
To be clear:
The event for the babylonjs happens BEFORE the CSS re-arrange of the layouts. This causes bad drawing effects as the CSS resizes after babylon “fixes” the size and it does NOT trigger the recalculation of the sizes: This causes stretching/warping of the images.
It also affects the babylonjs loading screen.
In order to sidestep this, I have manually created a loading div (as the generated screen was stretched). It hides and unhides a few items when ready, calling a 1 second delayed redraw, which is still after the CSS draw.
A left column 20em and the remaining stretching to 100%
Put a babylon render in the 100%
The initial render will happen before the CSS redraw.
If you resize the web browser this seems to fix it (hence me working out that a redraw is a solution).
Oh, i need a simple reproduction. not your project. That would be the best, because then I know that that with simple steps I can reproduce and debug. A simple HTML file with body and 3 HTML tags would probably be the best reproduction, especially if you are saying that it is happening with two-column flex layout.
Would that be possible?
I can send you a single page html, but it will contain sensitive information (urls etc).
I dont want to be linking out access to STL files on a forum.
I will PM you a flat html page that references the other stuff… if you tell me how
I am aware this doesn’t SHOW properly (cross site security), but it does mimic the issue correctly.
One page, flat HTML… just don’t want it on a forum page.