Why does my UI break on ultrawide monitors?

Most UI is laid out for a 16:9 canvas and stretched to fit. On a 21:9 or 32:9 display, center-anchored elements look fine but edge-anchored elements end up absurdly far from each other. Anchor edge elements to a 16:9 safe zone inside the wider canvas instead of the actual screen edge.

Should cutscenes letterbox on ultrawide?

Yes, if the cutscene was composed for 16:9. Showing the full ultrawide frame reveals off-camera crew or empty space. Letterbox to 16:9 during cutscenes and return to full width after. Mass Effect Andromeda and the Uncharted ports do this well.

What FOV should I use for ultrawide?

Scale FOV by the aspect ratio so the vertical FOV stays constant (Hor+ scaling). A 21:9 monitor at the same vertical FOV as 16:9 shows more horizontal world, which is what ultrawide players expect. Capping vertical FOV prevents fisheye distortion at extreme aspect ratios.

How to Debug UI Scaling on Ultrawide Monitors

Quick answer: Anchor edge HUD elements to a 16:9 safe zone inside the wider canvas, use Hor+ FOV scaling, letterbox cutscenes composed for 16:9, and test every menu at 3840×1080 and 5120×1440. Ultrawide is 10% of Steam users and growing.

Your UI looks gorgeous on a 1920×1080 monitor. A Steam player on 3840×1080 sends a screenshot: the health bar is in one corner of a vast empty canvas, the minimap is in the opposite corner, and the dialogue text stretches across three feet of screen. Ultrawide support needs deliberate design, not automatic scaling.

The Safe Zone Pattern

Define a 16:9 rectangle centered in the actual canvas. Edge HUD elements anchor to this rectangle’s edges, not the screen’s. On a 16:9 display, the safe zone equals the canvas. On a 21:9 display, there’s equal empty space to the left and right.

// Unity safe zone helper
public class SafeZone16x9 : MonoBehaviour
{
    void OnEnable() => UpdateRect();

    void UpdateRect()
    {
        var rt = (RectTransform)transform;
        float targetAspect = 16f / 9f;
        float screenAspect = (float)Screen.width / Screen.height;
        if (screenAspect > targetAspect)
        {
            float inset = (screenAspect - targetAspect) * Screen.height * 0.5f;
            rt.offsetMin = new Vector2(inset, 0);
            rt.offsetMax = new Vector2(-inset, 0);
        }
    }
}

Parent all HUD under this safe zone. Pinned-to-center elements (reticle, subtitles) anchor to the canvas directly. Pinned-to-edge elements (health bar, minimap) anchor to the safe zone.

Hor+ FOV Scaling

A fixed horizontal FOV on ultrawide squishes the world vertically. A fixed vertical FOV (Hor+) keeps vertical consistent and shows extra world to the sides. This matches what players want and is the standard for modern games.

float HorPlusFov(float targetVerticalFov, float aspectRatio)
{
    float vertFovRad = targetVerticalFov * Mathf.Deg2Rad;
    return 2f * Mathf.Atan(Mathf.Tan(vertFovRad * 0.5f) * aspectRatio) * Mathf.Rad2Deg;
}

Cap the vertical FOV (say 90 degrees). At 21:9 you get about 120 horizontal. At 32:9 you’d get 160+, which distorts badly — clamp below that and letterbox any remaining width instead.

Cutscene Handling

Cinematic cutscenes were composed for a specific aspect ratio. Playing them full-width on ultrawide shows off-camera scenery or empty void. Letterbox to the original aspect ratio during cutscenes and restore after.

Testing

If you don’t have ultrawide hardware:

Unity: Game view has custom resolutions. Add 3840×1080 and 5120×1440 entries.
Unreal: r.SetRes 3840x1080w in the console forces a windowed ultrawide render.
Godot: Window → Preview → Custom Size.

“Ultrawide players spend money. They also complain loudly when their expensive monitor is wasted. Design for the 16:9 safe zone + Hor+ FOV pattern and support comes free.”

Related Issues

For Canvas Scaler issues across resolutions, see Unity Canvas Scaler UI blurry. For broader UI overflow bugs, see how to debug UI layout overflow bugs.

Even if you don’t own an ultrawide monitor, test at 3840x1080 in editor every release. It costs 10 minutes and catches every layout regression before players do.