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:
Create a UI element in Roblox Studio.
Apply a UIStroke to the element.
Set the Thickness property of the UIStroke to a value less than 1 pixel (e.g., 0.5 pixels).
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.
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.
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.
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
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.
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.
