https://playground.babylonjs.com/#J78BZW#4
Notice as soon as you move the camera, the “middle” block loses all its pixel sizes and goes to 100% 100%.
This only happens when its parent is linked to a mesh, and the other siblings do not share its behavior.
Here is the unlinked version that shows how the item should stay looking visually.
https://playground.babylonjs.com/#J78BZW#2
Having a look at it.
I’m not sure I understand everything that is going on, but it seems the problem arises because the middle image makes its container bigger once processed.
You don’t see the problem the first time it is displayed because the image is not loaded yet when the computation is done the first time, but after that the STRETCH_EXTEND option will make the control too big: just comment line 119 and it will work:
What would cause that behavior? STRETCH_EXTEND at least according to the docs should be the one that scales it x:y independent, correct?
STRETCH_EXTEND does this in the _processMeasures method:
case Image.STRETCH_EXTEND:
if (this._autoScale) {
this.synchronizeSizeWithContent();
}
if (this.parent && this.parent.parent) { // Will update root size if root is not the top root
this.parent.adaptWidthToChildren = true;
this.parent.adaptHeightToChildren = true;
}
break;
So it sets adaptWidthToChildren and adaptHeightToChildren to true on the parent control (because in your case parent and parent.parent are non null).
Commenting those two lines make the PG work, but there must be a reason for them to be here…
However, I don’t understand the inner working of the GUI well enough to go beyond that.
if this.parent && this.parent.parent, I kinda dont understand that…
But I guess the solution would be to wrap it in another container, besides your solution of course.
Im just gonna use yours, but I was trying to understand what was really going on more.