# Wierd gui glitches

**URL:** <https://forum.babylonjs.com/t/wierd-gui-glitches/38791>\
**Category:** Questions\
**Created:** [March 6, 2023, 7:33pm UTC](https://forum.babylonjs.com/t/wierd-gui-glitches/38791 "2023-03-06T19:33:41Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Vladislav\_Zhidko](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/vladislav_zhidko/32/26954_2.png) [@Vladislav\_Zhidko](https://forum.babylonjs.com/u/Vladislav_Zhidko)\
**Post date:** [March 6, 2023, 7:33pm UTC](https://forum.babylonjs.com/t/wierd-gui-glitches/38791/1 "2023-03-06T19:33:41Z")

</div>

![Снимок экрана 2023-03-06 в 22.29.57](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/f/c/fc7b717f7235d2fc59a40f1c19324f1ded07cd71.png)

Hi all. I can’t attach a link to the playgroup, but I’ll try to describe it in words. I sometimes catch wierd glitches on my gui. I was able to get rid of this with the following code, but since I have to update the whole texture, fps drops significantly

```auto
this.onBeforeDrawObservable.add(() => this.markAllAsDirty());

```

This is a screenshot of how it should look:

 ![Снимок экрана 2023-03-06 в 22.34.09](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/2/9/295feb51481d02613f15b22846cc6017d36ac193.jpeg)

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [March 6, 2023, 8:30pm UTC](https://forum.babylonjs.com/t/wierd-gui-glitches/38791/2 "2023-03-06T20:30:54Z")

</div>

It would be wonderful to get some form of a reproduction, otherwise it is very hard to tell what the issue is. Could be an issue with caching, but I am not sure, TBH.  
I also notice that there is a button added on the bottom and that the card is displayed twice. is this a part of the problem, or is this the way it is implemented?

---

<div class="post-metadata">

**Author:** ![Vladislav\_Zhidko](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/vladislav_zhidko/32/26954_2.png) [@Vladislav\_Zhidko](https://forum.babylonjs.com/u/Vladislav_Zhidko)\
**Post date:** [March 6, 2023, 8:37pm UTC](https://forum.babylonjs.com/t/wierd-gui-glitches/38791/3 "2023-03-06T20:37:04Z")

</div>

I have no way of reproducing this, it is worth noting that the problem is only on some devices

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [March 6, 2023, 8:40pm UTC](https://forum.babylonjs.com/t/wierd-gui-glitches/38791/4 "2023-03-06T20:40:39Z")

</div>

You’ll sadly have to be more specific than that… what devices, what are they doing, what is this extra button, what is this extra card under the original card?

---

<div class="post-metadata">

**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\
**Post date:** [March 7, 2023, 9:16am UTC](https://forum.babylonjs.com/t/wierd-gui-glitches/38791/5 "2023-03-07T09:16:25Z")

</div>

How are you adding your cards and removing the others? From your screenshot, it looks like you are stacking up containers. Something is likely wrong with your approach for the 2D GUI. I can’t imagine marking GUI elements as dirty as a recommendable option.  
As @RaananW said, it will be hard to understand what the issue is without a PG. Even a very simple one with just a repro of the method you use and the type of containers and imbrication.

---

<div class="post-metadata">

**Author:** ![Vladislav\_Zhidko](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/vladislav_zhidko/32/26954_2.png) [@Vladislav\_Zhidko](https://forum.babylonjs.com/u/Vladislav_Zhidko)\
**Post date:** [March 9, 2023, 10:15am UTC](https://forum.babylonjs.com/t/wierd-gui-glitches/38791/6 "2023-03-09T10:15:38Z")

</div>

Hi. I found the cause of these glitches. I scale my window according to the height of the screen, and when I scale it, it breaks

```auto
const scale = Math.min(1, this.host.getSize().height / this.host.idealHeight);
this._container.scaleX = scale;
this._container.scaleY = scale;

```

```auto
 this.ui = AdvancedDynamicTexture.CreateFullscreenUI('UI', true, this);
 this.ui.idealHeight = 1080;
 this.ui.idealWidth = 1920;

```

---

<div class="post-metadata">

**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\
**Post date:** [March 9, 2023, 10:36am UTC](https://forum.babylonjs.com/t/wierd-gui-glitches/38791/7 "2023-03-09T10:36:59Z")

</div>

Did you try using scaleTo() for the ADT? It has recently received a fix and normally should render at new size without an update (altough I haven’t tried it). Anyways, what happens is that the ADT layer/texture does not rescale just on itself. You should try add this and see how it goes:

> [@Resize on different screen size](https://forum.babylonjs.com/t/resize-on-different-screen-size/30500/5):
>
> Every time the window resizes, you want to rescale the texture to the dimensions of the canvas. This ensures that it will always have the same resolution as the scene // adt is your AdvancedDynamicTexture, engine is your Babylon.js engine window.addEventListener("resize", () =\> { adt.scaleTo(engine.getRenderWidth(), engine.getRenderHeight()); });

---

<div class="post-metadata">

**Author:** ![Vladislav\_Zhidko](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/vladislav_zhidko/32/26954_2.png) [@Vladislav\_Zhidko](https://forum.babylonjs.com/u/Vladislav_Zhidko)\
**Post date:** [March 9, 2023, 10:39am UTC](https://forum.babylonjs.com/t/wierd-gui-glitches/38791/8 "2023-03-09T10:39:12Z")

</div>

This does not work for me because I only need to scale a particular window without scaling the HUD, for example. Both the HUD and windows are drawn on the same texture

---

<div class="post-metadata">

**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\
**Post date:** [March 9, 2023, 10:44am UTC](https://forum.babylonjs.com/t/wierd-gui-glitches/38791/9 "2023-03-09T10:44:13Z")

</div>

Can you explain “a particular window”. Might be a language problem here (english is also not my language). It seems you are using a full-screen GUI. Where for me, the ‘window’ is the ‘window of the browser’ which contains the canvas and the FS GUI fills the canvas. Since there can only be one FS GUI on the canvas, I assume your “window” must be either a container or a viewport?

---

<div class="post-metadata">

**Author:** ![Vladislav\_Zhidko](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/vladislav_zhidko/32/26954_2.png) [@Vladislav\_Zhidko](https://forum.babylonjs.com/u/Vladislav_Zhidko)\
**Post date:** [March 9, 2023, 10:48am UTC](https://forum.babylonjs.com/t/wierd-gui-glitches/38791/10 "2023-03-09T10:48:15Z")

</div>

Yes, I named the popup (container) as the window

---

<div class="post-metadata">

**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\
**Post date:** [March 9, 2023, 11:02am UTC](https://forum.babylonjs.com/t/wierd-gui-glitches/38791/11 "2023-03-09T11:02:04Z")

</div>

So, it is a container, part of a single FS GUI. What sort of container? a rectangle, a stackpanel, a scrollviewer? an imbrication of these. Did you try just update the GUI on scale? I think we would really need to have this small repro in the PG (or the code for the entire build and logic) else this conversation might just not go to the point. Obviously, if the fix of marking all as dirty kind of solves the issue means the GUI is simply not updated. Just not sure to understand why here. On the other hand there might be some other solution for resizing the container (not using scale but resizing it) according to the window size/ratio.

---

<div class="post-metadata">

**Author:** ![Vladislav\_Zhidko](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/vladislav_zhidko/32/26954_2.png) [@Vladislav\_Zhidko](https://forum.babylonjs.com/u/Vladislav_Zhidko)\
**Post date:** [March 9, 2023, 11:23am UTC](https://forum.babylonjs.com/t/wierd-gui-glitches/38791/12 "2023-03-09T11:23:21Z")

</div>

Popup extends from the Abstract window, which extends the Container

```auto
export class PortWindow extends AbstractWindow (container) {
  private _container: Container;

  protected initiate() {
    this.renderToIntermediateTexture = true;
    this.isHitTestVisible = false;

    // TODO: find better solution
    // this.onBeforeDrawObservable.add(() => this.markAllAsDirty());
  }

  protected render() {
    this._container = new WindowContainer();
    this._container.heightInPixels = this.host.idealHeight;
    this._container.isHitTestVisible = false;
    this.addControl(this._container);

    const main = new PortMain();
    this._container.addControl(main);

    main.applyProxyState(this.stateHandler);
    main.init();
  }

  public resize() {
    const scale = Math.min(1, this.host.getSize().height / this.host.idealHeight);
    this._container.scaleX = scale;
    this._container.scaleY = scale;
  }
}

```

---

<div class="post-metadata">

**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\
**Post date:** [March 9, 2023, 11:26am UTC](https://forum.babylonjs.com/t/wierd-gui-glitches/38791/13 "2023-03-09T11:26:51Z")

</div>

Thank you. That makes it clearer. Since I’m not a specialist for this, I’ll call back @RaananW or @carolhmj on this. Hope they will be able to spot the issue from here.  
Meanwhile, have a great day 🕶

---

<div class="post-metadata">

**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\
**Post date:** [March 9, 2023, 12:19pm UTC](https://forum.babylonjs.com/t/wierd-gui-glitches/38791/14 "2023-03-09T12:19:29Z")

</div>

Are you able to reproduce this scenario on a Playground? It would be super helpful to us to look into it better.

---

<div class="post-metadata">

**Author:** ![Vladislav\_Zhidko](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/vladislav_zhidko/32/26954_2.png) [@Vladislav\_Zhidko](https://forum.babylonjs.com/u/Vladislav_Zhidko)\
**Post date:** [March 9, 2023, 12:44pm UTC](https://forum.babylonjs.com/t/wierd-gui-glitches/38791/15 "2023-03-09T12:44:48Z")

</div>

I would if I could consistently reproduce this bug. But on one of my computers it exists, on the other it does not.I would if I could consistently reproduce this bug. But on one of my computers it exists, on the other it does not

I only need to hide a control to get it to show up incorrectly

 ![Снимок экрана 2023-03-09 в 15.43.29](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/5/4/54b73b38076605796b2dad5e06e0763286602b4f.png)

> **[Babylon.js Playground](https://playground.babylonjs.com/#XCPP9Y%2317827)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

---

<div class="post-metadata">

**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\
**Post date:** [March 9, 2023, 1:04pm UTC](https://forum.babylonjs.com/t/wierd-gui-glitches/38791/16 "2023-03-09T13:04:46Z")

</div>

> [@Vladislav\_Zhidko](#):
>
> I only need to hide a control to get it to show up incorrectly

A control. Any control? A control higher in the hierarchy? All, I can see is that if you hide a control, it updates the ADT. Are you really sure this ADT is getting updated on rescale?

---

<div class="post-metadata">

**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\
**Post date:** [March 9, 2023, 5:25pm UTC](https://forum.babylonjs.com/t/wierd-gui-glitches/38791/17 "2023-03-09T17:25:23Z")

</div>

> [@Vladislav\_Zhidko](#):
>
> I only need to hide a control to get it to show up incorrectly

How does it show up on your machine?

---

<div class="post-metadata">

**Author:** ![Vladislav\_Zhidko](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/vladislav_zhidko/32/26954_2.png) [@Vladislav\_Zhidko](https://forum.babylonjs.com/u/Vladislav_Zhidko)\
**Post date:** [March 10, 2023, 7:08am UTC](https://forum.babylonjs.com/t/wierd-gui-glitches/38791/18 "2023-03-10T07:08:23Z")

</div>

This is how it should be:

 ![Снимок экрана 2023-03-10 в 10.07.13](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/9/e/9eb3e8c51350a982a750056041acc1eea084b622.jpeg)  
It’s with a glitch:  
 ![Снимок экрана 2023-03-10 в 10.08.05](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/c/4/c451cb1ddf9e32be72857619e3e4176477dca34e.jpeg)

 ![Снимок экрана 2023-03-10 в 10.08.12](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/4/e/4e51e2a5a3d4d1818761973a25aaa6e17ae537b5.jpeg)

---

<div class="post-metadata">

**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\
**Post date:** [March 10, 2023, 8:22am UTC](https://forum.babylonjs.com/t/wierd-gui-glitches/38791/19 "2023-03-10T08:22:31Z")

</div>

Can you relate this glitching area to a container or a control. I.E. Could it be roughly the area covered by a textBlock?

---

<div class="post-metadata">

**Author:** ![Vladislav\_Zhidko](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/vladislav_zhidko/32/26954_2.png) [@Vladislav\_Zhidko](https://forum.babylonjs.com/u/Vladislav_Zhidko)\
**Post date:** [March 11, 2023, 1:30pm UTC](https://forum.babylonjs.com/t/wierd-gui-glitches/38791/20 "2023-03-11T13:30:21Z")

</div>

I removed all the text blocks. There is no difference

[Next page](https://forum.babylonjs.com/t/wierd-gui-glitches/38791.md?page=2)