Button click causes animation of nested StackPanels to fail

Hi, clicking buttons inside a StackPanel that is inside another StackPanel will cause fade out animations to fail on the ‘parent’ StackPanel.

In this PG, click button1 and button2, then click the ‘TEST ANIMATE’ button. StackPanel will not fade.

Test again, reset PG, only click TEST ANIMATE button. StackPanel will fade correctly.

https://www.babylonjs-playground.com/#7FZN42#3

Thanks in advance.

This seems to be relates to alpha setting on the buttons (which get their alpha values from the hover effects):

https://www.babylonjs-playground.com/#7FZN42#6

@Deltakosh - any quick idea? I can investigate further if you don’t have one :slight_smile:

You are right about the hover effect.

It is not just StackPanels causing the problems, but it may be parent containers in general, as the bug does not appear without a parent.

I swapped out the StackPanels for rectangles and the animation still doesn’t work.

https://www.babylonjs-playground.com/#7FZN42#9

Without parent, no bug:
https://www.babylonjs-playground.com/#7FZN42#10

By default, the alpha property of controls are not taken into account: they are taken into account only when you change their value.

So, when you change the alpha value of the main container (mainStackPanel), it sets this alpha value to the context. As all other child controls don’t set alpha values, this value is in effect for all the children and the effect is the intended one: everything is fading out.

Now, when you click on one button (say button 1), the alpha value is set by the code handling the “clicked” display effect. So, when rendering button1, the alpha value is taken into account this time and the formula is:

context.globalAlpha = this.parent ? this.parent.alpha * this._alpha : this._alpha;

The button1 does have a parent, but this parent is buttonStackPanel, not mainStackPanel! As the animation changes the value of mainStackPanel, the alpha value of buttonStackPanel is still 1, and so the globalAlpha value ends up being computed as 1*1=1.

In your case, the easiest fix is to set BABYLON.GUI.Control.AllowAlphaInheritance = true;, which leads to this computation for each control instead of the one given above:

context.globalAlpha *= this._alpha;

which is what you want to do.

PG: https://www.babylonjs-playground.com/#7FZN42#11

4 Likes

Thanks again Evgeni for the information and solution! :smiley: :smiley: