Work around for broken Unity 9 Slicing UI Image

I discovered a bug in Unity 9-slicing, specifically in the UI Image component. Unity even confirmed the bug, but then recently updated the case and marked it as “Per Design…Due to the nature of the bug”. My guess is that to fix the bug would break everyone in the world that has already found a work around for it.

The issue is that if you create a 9 sliced sprite using the Unity UI, it basically just doesn’t behave like a normal 9 slice. I tested this by rendering a pixel-accurate sprite to the left, then to the right of it, the same image but converted to 9 slice. The two images should be identical at the same size. However, the 9 sliced one was stretched on the ends even at rest.

What is everyone else doing to work around this terrible bug? Are you just creating your buttons at 1 size and not using 9 slicing for them? I’ve tried many other work arounds, and this seems to be the only reasonable approach. I have googled this problem, and it’s mentioned in tons of places, but no one seems to have a concise work around for it.

For those interested, here is a link to the bug: FogBugz
Look at the 2nd animation. Just compare the top MIX button with the second MIX button. Both use the same pixel-accurate dimensions, yet the second button is stretched on the sides both at rest and in motion. I just want the sides of the buttons to remain accurate. If I scale them manually to unbreak Unity, it’s fine, but then when the aspect ratio of the device changes, it’s broken again.

So any ideas how to get sliced sprite behavior for a UI Image component without using the built-in slicing?

Well, the issue is only the scale of the objects. If you want to avoid stretching do not scale any object non-uniformly. The canvas scaler should only scale uniformly. So when you want to check the size of an element you should change it’s Anchor min / max values. When anchors of a child object are placed correctly within it’s parent it should change it’s size accordingly without changing it’s scale.

The left, top, right and bottom values define the actual size of the object while the anchors define the relation to the parent If you place the child anchors at the corners of the child, the child will change it’s size 1-to-1 with the parent. So the child will keep its relative size. If you place the anchor at the corners or the parent, the child will keep its current distances from the border of the parent.

So just never touch the scale or if you have to only scale it uniformly.

Do i understand the problem correctly, that when you scale a 9sliced sprite unevenly, the edges gets misshaped? If so, leave the scale at 1. Change the width and height property in the rect transform instead.

This is still a bug! I can nine-slice a sprite fine with the SpriteRenderer, but when I use that same sprite on an Image, it doesn’t work! Discovered this while trying to make a nine-slice Fill for a Slider.

@supernat:
yeah, same here–
Just making my first steps in UI design and this sucks.
Image slice behaves totally different from Sprite Renderer sliced.
What is the workaround?

I hate this kind of stuff.
This whole 9-slicing system is completely unusable for buttons, which are often shown as a “prime usecase” - scaling uniformly is completely useless for a button with round corners.
Calling this “per design” is just lazy.
Its simple, this behaviour wrong - period.
Whoever would design something like this has the design wrong.
Whats the point of having unity modular in packages, release a “UI” 1.0 package and never update it.
Just fix this, and whoever is afraid of having his UI broken by this fix just don’t update - ui is legacy now anyways.