Notch on some phones may obstruct gameplay content when rotating the phone

Reproduction Steps

Devices tested on: iPhone 12 128GB (MGGE3LL/A) iOS 14.6
Roblox app version: 2.484.425477 (latest version on iOS App Store at the time of writing this bug report)

This only applies to phones with notches (I am unsure about Android but I am able to reproduce on iOS 100% of the time)

  • Join a game that supports both left and right landscape screen orientations
  • Rotate the phone to landscape with the notch facing to the left
  • Rotate the phone again so that the notch is facing to the right

Expected Behavior

I expect the black bar to be behind the notch of the phone so that it does not obstruct the content of the game that I am playing. similar to the image below:

This was taken on an iPhone 6 and it was like 2 AM so please excuse the quality.

Actual Behavior

The black bar that should be around the notch displays on the left side of the phone when the notch is on the right side.

Images:

More images


Issue Area: Mobile App (iOS, unsure about Android)
Issue Type: Display
Impact: Low
Frequency: Constantly
Date First Experienced: 2021-07-03 02:07:00 (-04:00)
Date Last Experienced: 2021-07-03 02:07:00 (-04:00)

9 Likes

Hi @ElijahAppleUser - thank you for the detailed bug report, the pictures are very helpful! I’ve created a ticket to address this. We are actively looking into improving the Roblox experience on devices with notches!

5 Likes

Hi I believe this bug should be fixed now, can you confirm if you get a chance? Thanks!

1 Like

This fix created a new problem for me and other creators where GUI’s appear slightly further away from the correct positions on the screen side where the notch is currently not rotated in, leaving the other side GUI’s like shop icons more spaced out and cropped to the center when it should stay at it’s original position on the side despite rotating the screen notch.

  • Could this be optional if possible or improved?
3 Likes

This has just happened to me as well, my ui on the left side now has a gap between them and the left side of the screen

5 Likes

Hi @Vikram200526 and @joelbloxx, thanks for your feedback!

Currently this is working as designed, in landscape mode the safe area insets are applied symmetrically. Here is the announcement post for more info.
This was a design decision made for this feature, but we understand that it might not always be the right choice for all games.

I will investigate if we can add something like ScreenGui.AsymmetricalLandscapeSafeInsets: boolean to turn off the symmetrical insets.

6 Likes

We need this to become a toggle!!

A LOT of our users w/ these devices have expressed how they deeply dislike the fact that all their buttons got pushed towards the center. Especially when some buttons are for mainly used for combat - it kills the use of the extra space on the edges and obstructs what the user can see :frowning:

Deeply appreciate it if this gets added <3

1 Like

Hi @Vikram200526 @joelbloxx I wanted to follow up on the feature request for asymmetrical landscape safe insets.

I checked with our design and product teams, and 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 with zero safe insets, and only add a custom padding on the right side of the screen using a script that measures the current safe inset size using this code.

4 Likes