High UIStroke thickness unintendedly increases parent UI element size on most phones

[Capoyoace (beebs)]

When on phones newer than the iPhone 7 (iPhone XR and up), there is an issue where a high UIStroke thickness causes the UIStroke to increase the size of the parent element (for example a frame). This seems to happen once the parent surpasses a certain size relative to the thickness of the UIStroke. This not only happens in Studio but in experience as well. The video below demonstrates what is happening:

UIStroke mobile glitch

repro:

1. Add a ScreenGui to StarterGui, and then add a Frame to the ScreenGui.
2. Add a UIStroke to the Frame.
3. Make the stroke’s thickness somewhere around 1000.
4. Turn on device emulation and set the device to any phone newer than the iPhone 7 (like the iPhone XR or Galaxy A16). You will see that the frame’s rendered size is bigger than the intended size.

Here is a simple place that displays the issue. Make sure to turn on device emulation to see the bug properly:
UIStrokeGlitch.rbxl (62.4 KB)

[luigiburger333 (LuigiBurger)]

Hi, thank you for the report. You are seeing the intended behavior of ScreenGui.SafeAreaCompatibility = FullscreenExtension, which is the default value. The documentation says:

If the total area of any descendant GuiObject within the ScreenGui (including any applied border or UIStroke) covers the device’s safe area both horizontally and vertically, its background area will be expanded to cover the fullscreen area.

If you want to highlight some area of your UI without this expansion, you can set ScreenGui.SafeAreaCompatibility = None, and ScreenGui.ClipToDeviceSafeArea = false.