How to Make 9-Sliced Frames Scale Properly Across Devices

Hello, I am a novice UI designer who is currently working on an unnamed project. For the games UI, I have been using 9-Slice which seemed to work fine until I changed the device the game was played on. When switched to mobile, the boarder noticeably becomes much larger and in doing so obscures the frame’s contents. Here is an example:

On Average PC: (Intended Look)

On an iPhone XR:

On an iPhone 4s:

Now obviously nobody will be playing this game on an iPhone 4s, but I used it as the most extreme example to demonstrate the distortion that occurs.

Is there any remedy to making the 9-Sliced boarders scale correctly with each device? I have tried UIAspectRatio, but it does not seem to preserve the images original size.

Any help or feedback is appreciated. Thank you for your time!

Still haven’t figured out a solution 3 days after posting this… I’m assuming that there is no way to correct this issue given 9-Slices behavior. This leads me to believe that different variations must be made for each type of device unfortunately. Really hope I’m missing something. Any reply helps. Thanks.

1 Like