UI Frame 1 Pixel Misaligned When Using Anchor Point

I have created a fairly standard piece of UI in studio, a stat bar, that utilises the AnchorPoint property for positioning some elements. The bar, as it should appear, and it’s object hierarchy are pictured below.


BarInner, a transparent element, is positioned inside BarOuter with an AnchorPoint of 0,1 and Position of 0,0,1,0 such that it should be exactly aligned to the bottom of BarOuter, as shown in the top image. VisibleBar is then positioned inside BarInner with the same AnchorPoint and Position. All element have a BorderPixel size of 0.

At some screen sizes, the BarInner/VisibleBar will misalign and appear one pixel above the bottom edge of BarOuter, even though the edges should always be perfectly aligned regardless of screen size.
image

I’ve included the gui as a model file, simply insert it into a place and resize the viewport. You should see a black line flickering in and out below the orange bar as you resize it. UI.rbxm (4.5 KB)

13 Likes

Thank you for reporting this issue! I’ve created an internal ticket for tracking this.

6 Likes

Is this also related to the “tail” of chat bubbles having a 1 pixel gap away from the rest of the bubble sometimes depending on how you position your camera? Or is that just rounding stuff?

1 Like

Do you have any updates on this issue? It’s still occurring and unfortunately it can be quite ugly in a lot of my game UI, especially on lower resolution screens, and I’m not sure of a good work around without abandoning the use of anchor point.

Does this have anything to do with the fact that even if I set my GUI to fill up the whole screen, there’s still always that little bar at the top that just refuses to?

You might be thinking of the Gui inset, you can use ScreenGui.IgnoreGuiInset to turn that behaviour off

1 Like