When the Mobile Previewer loads, the Safe Zone widget is not working properly at startup, and requires a window resize to update to the correct Safe Zone.

Steps to Reproduce
  • Create a UserWidget with its root being a CanvasPanel
  • Create a SafeZone anchored to the four corners of the screen
  • Create an Overlay inside the safe zone that stretches to the bounds of the SafeZone.
  • Place blank (white square) Image widgets in the four corners of the SafeZone.
  • Your Widget Tree should now look like UMGSafeZones.JPG (attached).
  • Set the UMG Design View to iPhoneX resolution.
  • NOTE: There is a bug in 4.26 where DrawSafeZones( ) is not properly called within SDesignerView.cpp. I mentioned that on another post. These repro steps assume that the custom unsafe zones DO show up in the UMG Designer.
  • My custom unsafe zones specify notches on both the left AND the right. From BaseDeviceProfiles.ini: +CVars=r.CustomUnsafeZones="(L:free[0,-15][812,15]);(P:fixed[83,0][206,30]);(L:free[-30,83][30,206])"
  • In the UMG Designer, notice that the squares on the left side are pushed in to account for the "notch" unsafe zone. The squares on the right side are also pushed in to account for the "notch". So this is showing as expected. Also, the bottom squares have been moved up slightly due to the "home bar" unsafe zone.
  • Code / BP your UserWidget to come up during LevelScriptActor::BeginPlay( ).
  • Launch the mobile previewer with the iPhoneX device profile set as the preview profile.
  • You will now see what I've shown in MobilePreviewIssue.JPG (attached). We see the correct debug safe zone "bars" on the left/right/bottom. However, the white squares are not positioned correctly. The ones on the left appear pushed in, but they aren't pushed in the exact right amount. Also, the squares on the right are not pushed in at all, meaning they aren't being correctly affected by the SafeZone. Lastly, the bottom squares are somewhat pushed in, but again, not to the exact amount they should be.
  • Now, using your mouse, grab the lower right corner of the Mobile Preview window and adjust the size of the window slightly. As soon as the screen resizes, we see MobilePreviewAfterAdjustment.JPG (attached). Now we see the squares being correctly moved in the ways you would expect them.

Have Comments or More Details?

There's no existing public thread on this issue, so head over to Questions & Answers just mention UE-119460 in the post.

Login to Vote

ComponentUE - Platform - Mobile
Affects Versions4.26.2
CreatedJul 12, 2021
UpdatedAug 1, 2023
View Jira Issue