Unequal UIStroke Widths On Smaller Screens

[bvetterdays (roman)]

On smaller screens, UIStrokes with a Thickness value of around 1 or less than have unequal stroke widths on each side, resulting in a distorted appearance. As this issue is particularly noticeable on smaller screens with fewer pixels of real estate, it’s likely due to the difficulty in rendering sub-pixel values accurately.

Reproduction Steps:

1. Create a UI element in Roblox Studio.
2. Apply a UIStroke to the element.
3. Set the Thickness property of the UIStroke to a value less than 1 pixel (e.g., 0.5 pixels).
4. Observe the stroke’s appearance on a smaller screen with a viewport size of around 886x370. Depending on how small your screen is, the stroke will sometimes appear properly on certain edges and either thinner or completely invisible on others, or sometimes it will not appear at all on much smaller screen sizes.

Observe in this image that the stroke on top of the frame is much thicker than the stroke on the bottom of it, and each edge’s stroke does not have visual acuity in thickness.

Current Behavior:

The stroke may display on certain edges without visual acuity across all of them at Thicknesses between 0.5 and 1, but at lower than 0.5 sometimes the stroke doesn’t display at all.

Expected Behavior:

The UIStroke should display uniformly on all sides, regardless of the thickness value, even at sub-pixel levels.

repro.rbxl (55.2 KB)

The repro file shows a direct and simple repro of the issue. Opening it in Studio and ensuring your screen size is small (preferrably around 886 pixels wide and 370 pixels high) will display the issue where different sides of the white frame have a different sized stroke.

[weakroblox35]

This is expected behavior since UiStroke as of now uses Offset instead of Scale for Thickness, there have been multiple reports regarding but no further updates from the engineers handling ui.

Add Scale Property to UIStroke

Add Scale as a mode for UIStroke Roblox makes available, the object called ‘UIStroke’ which allows developers to create outlines around UI such as ‘Frame’ and “TextLabel”. The issue currently is that we can only define the thickness of the stroke in terms of pixels, however it would be incredibly useful to include SCALE so that our GUI outlines look the same accross multiple devices. Also, if this is too hard to implement because it may break the vale type, consider adding an enum type for UI…

Additionally, you can do a hotfix by just taking the client viewport (screen resolution), multiplying it with the initial thickness then diving everything with the base size (1200)

.Thickness = UiStrokeThickness * Camera.ViewportSize.X / 1200 -- UiStrokeThickness is a variable that holds the original thickness

[bvetterdays (roman)]

Please read the report. This isn’t about the fact that UIStrokes don’t support Scale instead of Offset, I know the size discrepancies across different devices are expected. The issue is that different sides of the same stroke have different thicknesses, when each side should have the same thickness. I was in a rush when I wrote this report so I apologize if it’s worded incorrectly.

I confirmed this was a bug privately with an engineer on the UI team before filing it.

[weakroblox35]

@bvetterdays

The issue is that different sides of the same stroke have different thicknesses, when each side should have the same thickness. I was in a rush when I wrote this report so I apologize if it’s worded incorrectly.

Oh, I just managed to reproduce that. Sometimes it doesn’t even render on big screens.
The thickness is also very blurry.

[Crygen54 (Crygen)]

This issue is hapenning when using any decimal number on UiStroke thickness, not only bellow 1, its just that it is more noticeable with a small thickness size.