Scroll bar looks weird in game

Help and Feedback Art Design Support
#1

Hello, I was recently making a simple settings GUI with a horizontal scrolling frame at the top with buttons representing different categories. The scroll bar looks totally fine in Studio, but it breaks and looks divided into three parts when I launch the game.
Here are some screenshots:

StudioScrollbar
UI inside studio

InGameScrollbar
UI in game

Explorer

Scrollbar

I tried resizing all the frames and the scroll bar, making all the frames transparent to see if there is a possible scaling issue, but nothing works. I also restarted Studio, but since it happens on a normal client as well the chances of that fixing anything are low. The issue happens every time I play my game. Did I do anything wrong? All replies are appreciated!

3 Likes
#2

It could be because of the screen size difference in Studio and in-game stretching the Top and Bottom scroll images, giving them a weird look.

If you haven’t changed the Bottom and Top image properties to different images, you might want to consult Roblox on this issue.

I haven’t a complete understanding of this situation so if I’m wrong in any way please let me know.

4 Likes
#3

Thanks! I’ll have a closer look at the Top and Bottom images as soon as I can. I haven’t changed them, but I will try resizing my frames once again as well as testing it on more devices.

#4

So I tested this again and it seems to be an issue with sizing of the UI. I played my game in Studio and it started working all of the sudden, but it’s still broken on certain devices. It’s unpredictable, with some sizes working and others not. I’m starting to think it’s some sort of bug.

#5

You can use UIAspectRatioConstraints to solve it not working on other devices.

I recommend a plugin called AutoScale (Lite / Plus) which basically converts a UI element’s size/position to Scale or Offset, and the auto scaling feature.

TLDR: It makes your UI retain it’s size on all screen sizes.

Plugin: https://www.roblox.com/library/1496745047/AutoScale-Lite
[Plugin] AutoScale Lite for GUIs - Scale your UI

1 Like
#6

This has been a bug for a long time and still is. Whenever you have the scrollbar horizontal you get it looking weird not really a thing you can fix (from what I know of).

1 Like
#7

This is most probably true.The scroll bar changes (breaks) based on the size of the frame and there isn’t a size that would work on every device.

Edit: Just noticed a bug report on this topic.