GUI alpha involving 2+ levels of nesting appear to not work as expected, on all platforms

Bugs
1

Hi,

I have noticed some really strange behavior with the alpha of GUI elements.

Turns out a child GUI element can be fully opaque, while a parent further up in the chain is transparent. This has caused issues where I attempt to hide all my GUI by changing the root’s alpha to 0. Just to see that one of the nested children is still being visible.

This happens on Windows, Mac, Android and iOS. So, it appears to be an issue for all platforms.

Here’s a playground replicating the issue:
GUI Alpha Issue | Babylon.js Playground (babylonjs.com)

I have added comments to the code in the playground, pointing out which lines causes inconsistent behaviors.

Also, I saw this thread:
Problem with gui child text alpha on IOS 17.4 - Bugs - Babylon.js (babylonjs.com)

Perhaps it’s related…

2

I have created a playground, with an interactive example, to make it more obvious what is going on:
GUI Alpha Issue - interactive example | Babylon.js Playground (babylonjs.com)

I’m going to start working on a workaround, which will most likely involved extending some of the components.

Edit:

Here’s the workaround:
GUI Alpha Issue - workaround interactive example | Babylon.js Playground (babylonjs.com)

I extended the Rectangle component and made it calculate the alpha correctly. The idea is that you should be able to replace all instances of the default Rectangle with the fixed class. Then once the alpha bug is fixed, you should be able to revert back to the default Rectangle class without seeing any difference.

3

Hi @RandomlyFish

I believe this was done like that for performance reasons.

you can always use parent.isVisible = false; to immediately hide it.

There’s also a static property on the GUI.Control class, this is what you want to use in your case.
BABYLON.GUI.Control.AllowAlphaInheritance = true;

2 Likes
4

Hi @aWeirdo

Thank you so much for letting me know about AllowAlphaInheritance! That fixes it.

Also, thanks for offering an alternative solution with isVisible. Unfortunately, that wouldn’t work in my own project, as I fade in and fade out my UI.

The following is directed to anyone reading this, and not specifically you @aWeirdo:

While I’m happy that this is an option, and I’m fine with the default behavior being that a parent can be more transparent than its child, as that could be used intentionally. However, I’m not a fan of side effects like this, where changing a value, then changing it back to default, results in a different outcome than how it was by default.