I recently noticed my ui getting messed up in my game without changing anything and after reading this I would assume this is the issue.
The red buttons, the minimap, and the Roblox buttons should be all the way to the left, now there’s just a weird gap between the buttons and the left side of the screen
Please read the details in the main post - there is a detailed description of how the UI insets work.
If the device has a notch or a camera cutout, the UI will be inset. What device did you use to capture that screenshot? Can you show what it looks like on the actual device?
Can you reach out directly to @stadium_parkour and I with example code that reproduces the issue? Thanks.
Thanks for the report, could you please share the place id where this is occurring?
This is the place ID 815405518
This issue also occurs in any game that has items that can be moved around with the Roblox inventory system.
This is image of my actual device IRL: iphone 11
The UI is supposed to be at border of screen to make user feel like they have space. In this before and after, “Before” is superior in design and placement.
It is about priorities for me. User experience is most important, more so than the small “useless” space around the notch.
Please make setting to choose one or the other and allow developers to control how their screen gui appear on devices.
EDIT: I read you guys are planning on adding more settings like asymmetry. Hope these come soon.
Hi there, I used a iPhone 12 and the picture was just a screen shot, here is a picture showing the whole phone
I prefer my ui to be all the way to the left side of the screen as I do not like the gap (I want it to take up as less space of the gameplay as possible), there is also a post above me explaining the same preference
I’ve tried messing around with the new inset options but I couldn’t find a way to make the ui work for my preference.
Edit : I also found out asymmetrical options might be added, hoping they will!
OK thanks! Yes it looks like a bug with the built-in backpack. I’ll let you know when I have an update on this!
It’s broken and makes it weird and unusual to press the gui’s for some reaon.Oh and no options? Again?? Just straight forcing you into this 
Sorry to hear that! Would you be able to share some screenshots/screen recordings of what is breaking? Thanks!
One of the problems i get is changing items order in games with default inventory hud. It seems like i need to drag and place the tools to the left instead of the center for them to be there.
Why was this suddenly enabled for nearly all mobile players without any advance notice for developers?
This has been listed as a Studio Beta the whole time, and I had no idea this was going to be imminently released to the general public. I hadn’t started the conversion process because it was not clear whether this system was finalized or whether there were still going to be more changes to how this works. I would’ve expected there to be some kind of advance notice/release date if these changes were locked in and set for full release - now our games’ full-screen UIs are borked, and I only found out about this because a player reported it, so I’m suddenly gonna have to spend tonight fixing our UIs.
Anytime potentially breaking changes are introduced to the Roblox API, there’s always a very clear migration period communicated to us - it should be no different for these UI changes. Frustrating that this is being treated as something that can just be freely flipped on/off without any advance communication.
Thanks for reporting this (also reported here), the backpack offset bug should be fixed in the next release!
For most simple UIs, no manual work should be needed to have the UI work on notched displays (due to the automatic adaptation strategies listed here).
However, we added several properties to ScreenGui to allow you to customize safe area insets and automatic background expansion if you would like.
The Studio emulator is bugged. I copied and pasted my unmodified UI onto a blank baseplate, and while I’m in edit mode (not running the game) Studio shows the UI automatically extending to fill the full screen, but when I actually play the game, it does not fill the screen.
The same is true if I just use a ScreenGui with one Frame in it (size 1, 0, 1, 0)
Hi, thanks for reporting this issue. This actually isn’t a bug but it is a usability issue when creating UI in a ScreenGui with IgnoreGuiInset=false. In edit mode, there is no Core UI top bar, so the top bar height is 0. However, in play mode, the top bar height is usually 36px.
In edit mode, since the Device Safe Area = Core UI Safe Area (because the top bar is 0 height), a frame with scale size (1, 1) will take up the entire Core UI Safe Area which also fills the entire Device Safe Area. So the Frame is background extended.
However in play mode, the Frame no longer takes up the entire Device Safe Area (since it doesn’t cover the top bar), so it isn’t background extended.
If your intention is to make a full-screen covering, we recommend you set ScreenGui.ScreenInsets=DeviceSafeInsets and SafeAreaCompatibility=FullscreenExtension, or set ScreenInsets=None.
For the first case, this will make a Frame with scale size (1, 1) take up the entire Device Safe Area, and then it will get background-extended to the Fullscreen Area.
For the second case, ScreenInsets=None will make a Frame with scale size (1, 1) take up the entire Fullscreen Area.
Thanks for raising this issue. We had an extended beta period so developers could ask questions, send feedback, test and adjust their UI if needed. However, you make a valid point and we can always do a better job with communicating timelines and important updates before they go out. I appreciate your feedback on this.
Let us know if you were able to adjust your UI based on the info provided (including the top bar area) and info on any additional issues you run into.
Thanks for taking this into account, really appreciate it!
I was able to get our UIs set up for notches pretty quickly. Was just caught off-guard by the sudden timing of the full release, but the conversion process itself went pretty smoothly.
The helper function for getting the safe area inset sizes was handy for properly converting certain parts of our UI, it would definitely be neat to have that as a built-in function.
To clarify: as a result of this forced change, there is now EXTRA padding added to the screen? Can we opt out of this? I don’t want to use the space near the notch and I want to be able to anchor UI to the side of the screen. I can no longer do that.
Was not aware this feature was shipping and all of our UI is messed up now. This is a nightmare for compatibility.
Edit: Also no way to reliably check for the notch on each side because ScreenOrientation is not always accurate
Hi, thank you for your feedback on this!
Unfortunately, the current decision is to not provide built-in support for asymmetrical landscape safe insets. The reason is that we want to make it easy for developers to build UI that follows industry-standard design principles found in many mobile games. One of those is that generally, symmetrical insets are applied for UI on notched screens in landscape mode. Here are some examples of games that inset their UI on both left and right, even though there is only a screen cutout on one side of the screen:
However, if you still would like to use asymmetrical safe area insets in your game, it is possible to create custom safe area insets using these methods:
One option is to use PlayerGui.CurrentScreenOrientation to detect LandscapeLeft/LandscapeRight orientations and assume that the notch (if any) is on the “top” side of the screen. Then, you could create a ScreenGui with ScreenInsets=None, and add a UIPadding to it in order to only add padding on the physical “bottom” side of the screen (which would be left or right).
Another solution would be to lock orientation to LandscapeLeft only, so you know the “bottom” side of the screen is always to the left. This could be done by setting PlayerGui.ScreenOrientation=LandscapeLeft instead of LandscapeSensor. Then you could use a ScreenGui ScreenInsets=None, and a UIPadding that only adds a right-side padding using a script that measures the current right safe inset size using this code.
Just checking, are you querying PlayerGui.CurrentScreenOrientation? Please note that CurrentScreenOrientation is the current screen orientation, while PlayerGui.ScreenOrientation sets what the supported orientations are for your game.
