GUIs incorrectly scale because of empty 40 pixel spacer at top of screen when using a custom device on phone or tablet mode

I’ve been trying to make mobile GUI but noticed that it never shows up the same when emulating it through studio. After further research and some photoshop, it seems that there is exactly a 40 pixel space between the top of the roblox topbar GUI and the top of the screen. This ONLY happens with a custom device using Phone or Tablet setting. The given preset devices are not affected. Resolution and dpi do not change results.

Below is what it is suppose to look like:

This is what studio shows:

This is both images overlaid on each other.

Using top of the Menu button (the one under the leaderboard button) on the Phone image, it is 7 pixels down which correlates to the offset given in the properties of that button. However, on the emulated image, it is lowered by 47 pixels. All GUIs have ignoreguiinset set to true

This also looks like it affects Roblox GUIs like the chat, Roblox menu button, and the 3D viewer thing.
image

Below is an example file with two GUIs. When “No Offset” GUI is enabled, the 40 pixel gap gets filled by that GUI. When the “Offset” GUI is enabled, the 40 pixel gap does not get filled.
Emulation Issue.rbxl (56.3 KB)

Specs: Ryzen 9 7950x, RTX 4090, 32 GB Ram, Windows 10 Home
No Beta Features enabled

I am currently using a Google Pixel 4 which has a resolution of 2280 × 1080 @ 444 dpi and is set up as 1140 x 540 @ 222 dpi to mimic the rest of the devices on studio.
It also seems that the emulation stats for all devices are halved so I did my test to mimic that.

2 Likes

Thanks for the report;We’ll follow up when we have an update for you!

1 Like