# ES6 package @babylonjs/gui: a rect will appear after the control when hovering the control and DisplayGrid rendering

**URL:** <https://forum.babylonjs.com/t/es6-package-babylonjs-gui-a-rect-will-appear-after-the-control-when-hovering-the-control-and-displaygrid-rendering/61341>\
**Category:** Bugs\
**Created:** [November 8, 2025, 3:06am UTC](https://forum.babylonjs.com/t/es6-package-babylonjs-gui-a-rect-will-appear-after-the-control-when-hovering-the-control-and-displaygrid-rendering/61341 "2025-11-08T03:06:08Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![RichardFly](https://avatars.discourse-cdn.com/v4/letter/r/8e8cbc/32.png) [@RichardFly](https://forum.babylonjs.com/u/RichardFly)\
**Post date:** [November 8, 2025, 3:06am UTC](https://forum.babylonjs.com/t/es6-package-babylonjs-gui-a-rect-will-appear-after-the-control-when-hovering-the-control-and-displaygrid-rendering/61341/1 "2025-11-08T03:06:08Z")

</div>

When I use the @ babylonjs/gui package of ES6, I draw a full screen DisplayGrid and add a Button using GUI. When I pass the Button continuously with the mouse, I see a black rectangular box around it. I cannot reproduce this problem in the commonjs package or the playground, but I can reproduce it in the @ babylonjs/gui package. You can download the project file I uploaded for testing

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/4/f/4f46633778fee0be7b499314d1306cea06fa70b0.png)

[gui-babylon.zip](https://forum.babylonjs.com/uploads/short-url/AiVjgkklfBwKJYMsDj3ZyvuNq2p.zip) (21.8 KB)

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [November 10, 2025, 3:53pm UTC](https://forum.babylonjs.com/t/es6-package-babylonjs-gui-a-rect-will-appear-after-the-control-when-hovering-the-control-and-displaygrid-rendering/61341/2 "2025-11-10T15:53:06Z")

</div>

cc @amoebachant

---

<div class="post-metadata">

**Author:** ![amoebachant](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/amoebachant/32/39450_2.png) [@amoebachant](https://forum.babylonjs.com/u/amoebachant)\
**Post date:** [November 10, 2025, 7:18pm UTC](https://forum.babylonjs.com/t/es6-package-babylonjs-gui-a-rect-will-appear-after-the-control-when-hovering-the-control-and-displaygrid-rendering/61341/3 "2025-11-10T19:18:57Z")

</div>

Thanks for the report too @RichardFly! I’ll also look into this one Wednesday. Have a great day!

---

<div class="post-metadata">

**Author:** ![amoebachant](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/amoebachant/32/39450_2.png) [@amoebachant](https://forum.babylonjs.com/u/amoebachant)\
**Post date:** [November 13, 2025, 12:39am UTC](https://forum.babylonjs.com/t/es6-package-babylonjs-gui-a-rect-will-appear-after-the-control-when-hovering-the-control-and-displaygrid-rendering/61341/4 "2025-11-13T00:39:54Z")

</div>

Hi @RichardFly, I was able to repro with the zip you sent, thanks! It seems that the difference between the repro app and the playground is that the repro sets adaptToDeviceRatio to true when creating the engine. It seems that it only repros on Mac (in both Safari and Chrome) but not on a PC. Can you try not setting adaptToDeviceRatio to true and confirm that it no longer repros on your end as well? Thanks!

---

<div class="post-metadata">

**Author:** ![RichardFly](https://avatars.discourse-cdn.com/v4/letter/r/8e8cbc/32.png) [@RichardFly](https://forum.babylonjs.com/u/RichardFly)\
**Post date:** [November 13, 2025, 1:02am UTC](https://forum.babylonjs.com/t/es6-package-babylonjs-gui-a-rect-will-appear-after-the-control-when-hovering-the-control-and-displaygrid-rendering/61341/5 "2025-11-13T01:02:58Z")

</div>

Yes, exactly what you said ! I am using Mac (in Edge) now.When I set the adaptToDeviceRatio to false, the problem was not happened!

---

<div class="post-metadata">

**Author:** ![RichardFly](https://avatars.discourse-cdn.com/v4/letter/r/8e8cbc/32.png) [@RichardFly](https://forum.babylonjs.com/u/RichardFly)\
**Post date:** [November 13, 2025, 1:04am UTC](https://forum.babylonjs.com/t/es6-package-babylonjs-gui-a-rect-will-appear-after-the-control-when-hovering-the-control-and-displaygrid-rendering/61341/6 "2025-11-13T01:04:25Z")

</div>

Is that an issue should be fixed?🫪

---

<div class="post-metadata">

**Author:** ![amoebachant](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/amoebachant/32/39450_2.png) [@amoebachant](https://forum.babylonjs.com/u/amoebachant)\
**Post date:** [November 13, 2025, 1:14am UTC](https://forum.babylonjs.com/t/es6-package-babylonjs-gui-a-rect-will-appear-after-the-control-when-hovering-the-control-and-displaygrid-rendering/61341/7 "2025-11-13T01:14:55Z")

</div>

I’m still investigating - actually I found that it repros on my PC as well, I just needed to change my device scale to something other than 100%. Once I get to the root cause we’ll determine what the right fix is. In the meantime, hopefully this serves as a workaround for you!

---

<div class="post-metadata">

**Author:** ![RichardFly](https://avatars.discourse-cdn.com/v4/letter/r/8e8cbc/32.png) [@RichardFly](https://forum.babylonjs.com/u/RichardFly)\
**Post date:** [November 13, 2025, 1:16am UTC](https://forum.babylonjs.com/t/es6-package-babylonjs-gui-a-rect-will-appear-after-the-control-when-hovering-the-control-and-displaygrid-rendering/61341/8 "2025-11-13T01:16:23Z")

</div>

Thanks!👏

---

<div class="post-metadata">

**Author:** ![amoebachant](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/amoebachant/32/39450_2.png) [@amoebachant](https://forum.babylonjs.com/u/amoebachant)\
**Post date:** [November 13, 2025, 7:41pm UTC](https://forum.babylonjs.com/t/es6-package-babylonjs-gui-a-rect-will-appear-after-the-control-when-hovering-the-control-and-displaygrid-rendering/61341/9 "2025-11-13T19:41:29Z")

</div>

Hi @RichardFly, got an update for you on this. We’ve tracked the issue down to an optional optimization which is calculating the clipping rectangle slightly off when the display’s scale isn’t 100%. If you add this to your code, you’ll bypass the optimization with that issue:

advancedTexture.useInvalidateRectOptimization = false;

This should be a good workaround for you, and I’ll continue to look into fixing that optimization to handle this case.

Thanks!
