# GUI control jittering when the direction of width growth is opposite to that of horizontal coordinate growth and the type of the leftInPixels value is floats **URL:** \ **Category:** Bugs\ **Created:** [November 10, 2025, 2:27am UTC](https://forum.babylonjs.com/t/gui-control-jittering-when-the-direction-of-width-growth-is-opposite-to-that-of-horizontal-coordinate-growth-and-the-type-of-the-leftinpixels-value-is-floats/61364 "2025-11-10T02:27:54Z")\ **Posts on this page:** 17\ **Page:** 1
**Author:** ![RichardFly](https://avatars.discourse-cdn.com/v4/letter/r/8e8cbc/32.png) [@RichardFly](https://forum.babylonjs.com/u/RichardFly)\ **Post date:** [November 10, 2025, 2:27am UTC](https://forum.babylonjs.com/t/gui-control-jittering-when-the-direction-of-width-growth-is-opposite-to-that-of-horizontal-coordinate-growth-and-the-type-of-the-leftinpixels-value-is-floats/61364/1 "2025-11-10T02:27:54Z")
Here is the demo: > **[Babylon.js Playground](https://playground.babylonjs.com/?inspectorv2=true#XCPP9Y%2323487)** > > Babylon.js playground is a live editor for Babylon.js WebGL and WebGPU 3D scenes If you look at the first rectangle, it’s always jittering.And the second is not jittering.Are there any issues with the accuracy of numerical processing？🙃 ---
**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:57pm UTC](https://forum.babylonjs.com/t/gui-control-jittering-when-the-direction-of-width-growth-is-opposite-to-that-of-horizontal-coordinate-growth-and-the-type-of-the-leftinpixels-value-is-floats/61364/2 "2025-11-10T15:57:40Z")
cc @amoebachant ---
**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:16pm UTC](https://forum.babylonjs.com/t/gui-control-jittering-when-the-direction-of-width-growth-is-opposite-to-that-of-horizontal-coordinate-growth-and-the-type-of-the-leftinpixels-value-is-floats/61364/3 "2025-11-10T19:16:25Z")
Thanks for the report and the repro @RichardFly - I’m away today and tomorrow but I’ll take a look at this on Wednesday. Thanks again! ---
**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, 12:20am UTC](https://forum.babylonjs.com/t/gui-control-jittering-when-the-direction-of-width-growth-is-opposite-to-that-of-horizontal-coordinate-growth-and-the-type-of-the-leftinpixels-value-is-floats/61364/4 "2025-11-13T00:20:03Z")
Any news ?😀 ---
**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:40am UTC](https://forum.babylonjs.com/t/gui-control-jittering-when-the-direction-of-width-growth-is-opposite-to-that-of-horizontal-coordinate-growth-and-the-type-of-the-leftinpixels-value-is-floats/61364/5 "2025-11-13T00:40:51Z")
Was working on your other bug report 🙂 I’m taking a look at this one now… ---
**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:49pm UTC](https://forum.babylonjs.com/t/gui-control-jittering-when-the-direction-of-width-growth-is-opposite-to-that-of-horizontal-coordinate-growth-and-the-type-of-the-leftinpixels-value-is-floats/61364/6 "2025-11-13T19:49:54Z")
Hi @RichardFly, for this one, the problem is that the top/left/width/height values the playground was using were not pixel aligned, so when the top left rectangle rect calculated its left value, it was taking the fixed (non-pixel aligned) value and subtracting width, another non-pixel aligned value. That plus the non-pixel aligned width meant that the right edge of the box wasn’t always going to line up with the expected pixel. In this updated playground, I’m pixel aligning the values by using fractions of the render height and width: [https://playground.babylonjs.com/?inspectorv2=true#XCPP9Y#23494](https://playground.babylonjs.com/?inspectorv2=true#XCPP9Y#23494) I’d recommend taking pixel alignment into account in your project so that you don’t get unexpected results when you UI falls between pixels. I hope that helps! ---
**Author:** ![RichardFly](https://avatars.discourse-cdn.com/v4/letter/r/8e8cbc/32.png) [@RichardFly](https://forum.babylonjs.com/u/RichardFly)\ **Post date:** [November 14, 2025, 1:03am UTC](https://forum.babylonjs.com/t/gui-control-jittering-when-the-direction-of-width-growth-is-opposite-to-that-of-horizontal-coordinate-growth-and-the-type-of-the-leftinpixels-value-is-floats/61364/7 "2025-11-14T01:03:05Z")
Maybe it’s not that helpful.The demo in playground is just an example of my use case.Typically,in a 2D editor, a rectangle used for selecting elements or controls is a quite normal thing. Usually the rectangle will be fixed a start pointer point, and it’s width , height and position will be changed during the pointer move . So the fixed point will be non-pixel aligned as what you said, the increment too. ---
**Author:** ![RichardFly](https://avatars.discourse-cdn.com/v4/letter/r/8e8cbc/32.png) [@RichardFly](https://forum.babylonjs.com/u/RichardFly)\ **Post date:** [November 14, 2025, 1:05am UTC](https://forum.babylonjs.com/t/gui-control-jittering-when-the-direction-of-width-growth-is-opposite-to-that-of-horizontal-coordinate-growth-and-the-type-of-the-leftinpixels-value-is-floats/61364/8 "2025-11-14T01:05:41Z")
I don’t think that require user to input the pixel aligned value would be a reasonable solution. Maybe it’s an internal process problem, right? ---
**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 14, 2025, 10:37pm UTC](https://forum.babylonjs.com/t/gui-control-jittering-when-the-direction-of-width-growth-is-opposite-to-that-of-horizontal-coordinate-growth-and-the-type-of-the-leftinpixels-value-is-floats/61364/9 "2025-11-14T22:37:17Z")
Hi @RichardFly, if you’re looking to build a 2D GUI with a selection box that is controlled by the mouse, you could use the scene.pointerX and pointerY properties to get pixel aligned values and use those to draw the rectangle. Here’s a sample I put together: [Babylon.js Playground](https://playground.babylonjs.com/#9V23FW) Does that help with what you want to do? Thanks! ---
**Author:** ![RichardFly](https://avatars.discourse-cdn.com/v4/letter/r/8e8cbc/32.png) [@RichardFly](https://forum.babylonjs.com/u/RichardFly)\ **Post date:** [November 14, 2025, 11:50pm UTC](https://forum.babylonjs.com/t/gui-control-jittering-when-the-direction-of-width-growth-is-opposite-to-that-of-horizontal-coordinate-growth-and-the-type-of-the-leftinpixels-value-is-floats/61364/10 "2025-11-14T23:50:11Z")
Yeah, the implementation code in the playground is basically the same as mine. But have you noticed that if your mouse move to the top left of the start point, you will notice that the bottom right of the rectangle was jittering, that’s why i made the demo in the playground. ---
**Author:** ![RichardFly](https://avatars.discourse-cdn.com/v4/letter/r/8e8cbc/32.png) [@RichardFly](https://forum.babylonjs.com/u/RichardFly)\ **Post date:** [November 14, 2025, 11:55pm UTC](https://forum.babylonjs.com/t/gui-control-jittering-when-the-direction-of-width-growth-is-opposite-to-that-of-horizontal-coordinate-growth-and-the-type-of-the-leftinpixels-value-is-floats/61364/11 "2025-11-14T23:55:57Z")
Plus, the demo in your playground, if your mouse moves to the bottom right of the start point, the top left of the rectangle is stable.What I want to say is that maybe the internal process of evaluate floats value met some problems. ---
**Author:** ![RichardFly](https://avatars.discourse-cdn.com/v4/letter/r/8e8cbc/32.png) [@RichardFly](https://forum.babylonjs.com/u/RichardFly)\ **Post date:** [November 14, 2025, 11:58pm UTC](https://forum.babylonjs.com/t/gui-control-jittering-when-the-direction-of-width-growth-is-opposite-to-that-of-horizontal-coordinate-growth-and-the-type-of-the-leftinpixels-value-is-floats/61364/12 "2025-11-14T23:58:09Z")
I am using mac edge. I could still repro the jittering problem in your playground. ---
**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 15, 2025, 12:29am UTC](https://forum.babylonjs.com/t/gui-control-jittering-when-the-direction-of-width-growth-is-opposite-to-that-of-horizontal-coordinate-growth-and-the-type-of-the-leftinpixels-value-is-floats/61364/13 "2025-11-15T00:29:18Z")
Ah, I wasn’t seeing the jitter in my PG until I realized you’re running on Mac and that you probably have a display scaling factor greater than 100%. I just tried my PG again with my scale factor increased and I do see the jitter in my PG too - a good clue! I’ll dig in further, thanks for the hint! ---
**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 15, 2025, 3:26am UTC](https://forum.babylonjs.com/t/gui-control-jittering-when-the-direction-of-width-growth-is-opposite-to-that-of-horizontal-coordinate-growth-and-the-type-of-the-leftinpixels-value-is-floats/61364/14 "2025-11-15T03:26:05Z")
Hey @RichardFly, with this new repro I was able to observe the values that rectangle.ts is passing into context.strokeRect() jittering, and worked backwards to find that in control.ts the size of the control was getting converted to an int. I believe that truncation is what was causing the math to be wrong that eventually leads to calling strokeRect() with the wrong values. As an experiment, I temporarily removed that conversion to int and it seems like that did stop the issue from repro’ing. To double check, could you try out this playground from a temporary draft PR I created to see if it stops repro’ing for you as well? I’m not proposing this as the fix, but it would be super helpful to know if it does stop the repro for you as well. > **[Babylon.js Playground](https://playground.babylonjs.com/?snapshot=refs%2Fpull%2F17461%2Fmerge#9V23FW%231)** > > Babylon.js playground is a live editor for Babylon.js WebGL and WebGPU 3D scenes Thanks, and have a great weekend! ---
**Author:** ![RichardFly](https://avatars.discourse-cdn.com/v4/letter/r/8e8cbc/32.png) [@RichardFly](https://forum.babylonjs.com/u/RichardFly)\ **Post date:** [November 15, 2025, 4:50am UTC](https://forum.babylonjs.com/t/gui-control-jittering-when-the-direction-of-width-growth-is-opposite-to-that-of-horizontal-coordinate-growth-and-the-type-of-the-leftinpixels-value-is-floats/61364/15 "2025-11-15T04:50:42Z")
I tried it. It works! No more jitter. Thanks. ---
**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 15, 2025, 5:25am UTC](https://forum.babylonjs.com/t/gui-control-jittering-when-the-direction-of-width-growth-is-opposite-to-that-of-horizontal-coordinate-growth-and-the-type-of-the-leftinpixels-value-is-floats/61364/16 "2025-11-15T05:25:53Z")
Great, that’s really helpful information. I’ll work on a proper fix on Monday. Appreciate the report and all of the help getting the info we needed to isolate the problem! ---
**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 18, 2025, 1:41am UTC](https://forum.babylonjs.com/t/gui-control-jittering-when-the-direction-of-width-growth-is-opposite-to-that-of-horizontal-coordinate-growth-and-the-type-of-the-leftinpixels-value-is-floats/61364/17 "2025-11-18T01:41:21Z")
Hi @RichardFly, after more testing today I have merged the PR with that fix. Thanks for the bug report!