Images editted using 9-Slice are changing in shape with the screen size

Bug Reports Studio Bugs
,
1

Issue:

I am using the Splice Edittor so I can resize my images however wide or long I want whilst retaining their corners and their shape in general. I am also editting all my UI with the Device Emulation on and using scale property so that the UI is consistent across all devices.

Device Emulation
Device Emulation925Ă—202 18 KB

However, for some reason, when I switch from PC emulation to a mobile emulation, the whole UI is somehow squished and rounded. Here, I have provided pictures of how it looks on PC (first) vs Mobile (second):

PC View
PC View1218Ă—682 68.4 KB

Mobile view
Mobile view1247Ă—778 68.9 KB

Funny enough, the buttons in the “Donations” board are also using the 9-Sliced editted property but they don’t get squished. Only the UI under ScreenGui.

I am attaching the 9-Slice properties that I am using for all the buttons. All the buttons that I am using have the 9-Slice property:

image
image357Ă—430 11.1 KB

image
image352Ă—280 33.6 KB

What I have tried:

  • Using AspectRatioConstraint (does not work)
  • Using Offset instead of Scale (does not work)
  • Changing the SliceScale property to 1 instead of 0.5 (does not work)
1 Like
2

Thanks for reporting! Can you also send us the place file containing this UI so that we can take a closer look?

2 Likes
3

Yes, I will personally DM that sensitive info.

2 Likes
4

Hi, thanks for the report. The result you are seeing is the expected behavior of 9-slices that it would only stretch the area when it has room to do so. As your UI scales with screen size, it would eventually shrink to a size that it could not render anything but the corners. If you want the corner size to be consistent, probably want to use UICorner and set corner radius to a scaled size.
The UI under surface does not scale as its viewport never changes, but the screen viewport would change according to application window size.