Fix Godot Viewport Stretch Mode Black Bars Unexpected

Godot’s project-level stretch settings are powerful but unintuitive. Three dropdowns — mode, aspect, and scale — interact with a base resolution, and the result at runtime is a composite of all four. The moment the window size changes aspect — a player rotating their phone, resizing on desktop, landing on a 21:9 monitor — the pixels on screen stop matching the editor view. Black bars are the usual symptom; cropped UI is the opposite symptom with the same root cause.

Know what each setting controls

Open Project Settings -> Display -> Window -> Stretch. You have four controls:

• Mode: disabled, canvas_items, or viewport. Disabled runs at native resolution. canvas_items renders at native resolution then scales 2D content post-hoc. viewport renders at the base size then upscales the whole framebuffer.
• Aspect: ignore, keep, keep_width, keep_height, or expand. Controls what happens when the window aspect differs from the base aspect.
• Scale: a multiplier applied to the base size (useful for high-DPI).
• Content Scale Size: the base resolution you designed at, set in Window/Size/Viewport Width and Height.

Pick the right mode

For most indie games shipping crisp UI, canvas_items is correct. Art is drawn at the device’s actual pixel density and scaled in a way that respects vector UI and font rendering.

Pick viewport only if you want deliberate pixelation — a pixel-art platformer where the whole game is a 320x180 framebuffer upscaled 4x. In viewport mode, fonts get blocky and UI cannot be higher resolution than the base, so use it with intent.

Pick the right aspect

Aspect is the letterbox toggle. A quick reference:

• keep: always shows the full base aspect ratio. Letterboxes with black bars if the window is wider or taller. Safest if you cannot afford to redesign UI for extra space.
• keep_width: shows the full width, adds or crops height depending on window. Good for vertical-scrolling platformers.
• keep_height: shows the full height, adds or crops width. Good for horizontal side-scrollers.
• expand: no letterboxing; you get whatever aspect the window has. Requires anchoring UI with full-rect Control nodes so they adapt.
• ignore: stretches the base non-uniformly to fill the window. Usually wrong.

Players on ultrawide monitors complaining about black bars want you on expand. Players on mobile in portrait seeing a squashed UI want keep_width with a scrolling layout below the fold.

Anchor UI for expand mode

If you pick expand, every Control that should fill the window needs full-rect anchors:

func _ready() -> void:
    anchor_left = 0.0
    anchor_top = 0.0
    anchor_right = 1.0
    anchor_bottom = 1.0
    offset_left = 0.0
    offset_top = 0.0
    offset_right = 0.0
    offset_bottom = 0.0

HUD elements pinned to corners should use corner anchors (1,1 with negative offsets for bottom-right, for example) rather than a fixed position. Use the Layout menu in the 2D editor to apply these quickly.

Handle the safe area on mobile

On phones with notches, even expand leaves black strips covered by the OS. Query the safe area and inset the top-level container:

var safe := DisplayServer.get_display_safe_area()
$HUD.offset_top = safe.position.y
$HUD.offset_left = safe.position.x
$HUD.offset_right = -(DisplayServer.window_get_size().x - safe.end.x)

This keeps your health bar out from under the notch without losing the expanded aspect.

Test at multiple window sizes

The editor preview always runs at the design size, so you will never see the stretch bug from the editor alone. Export a debug build and resize the window to 21:9, 4:3, square, and portrait. If the game looks right at all of them, your settings are correct. If it breaks, go back to the aspect dropdown — you almost certainly want something other than what you have.

Understanding the issue

This bug class falls into a pattern that's worth understanding beyond the specific case. In Godot Engine, the underlying behavior is shaped by how the engine layers its abstractions - the public API you call, the runtime systems that respond, and the platform-specific implementations underneath. A bug at any layer can produce symptoms that look like they originate at a different layer. Triaging effectively means recognizing which layer the symptom belongs to, even when the gameplay code is what's visible.

The specific bug described above is the kind that surfaces during integration rather than unit testing. It depends on a combination of factors: the asset configuration, the runtime state, the platform's specific behavior. In isolation, each piece looks correct; in combination, the bug emerges. This is why thorough integration testing - playing the actual game in realistic conditions - catches things that automated tests miss.

Why this happens

Bugs of this class are particularly easy to ship past internal QA because they often depend on specific runtime conditions - hardware combinations, network states, or asset configurations that QA didn't reproduce. Players hit them in the wild, file reports that are hard to repro, and the bug accumulates negative reviews while engineering tries to recreate the failure mode.

At the engine level, the behavior comes from a deliberate design decision in Godot. The engine team chose a particular trade-off - usually performance versus convenience, or generality versus specificity - and that trade-off has consequences when you push against it. Understanding the trade-off is what turns 'this bug is mysterious' into 'this bug is the expected consequence of this design'.

Verifying the fix

Verifying this fix in isolation is straightforward: reproduce the bug, apply the change, confirm the bug no longer reproduces. The harder verification is regression - did this fix introduce a new bug elsewhere? Run your standard regression suite, plus any tests that exercise the same code path with different inputs.

Reproducibility is the prerequisite for verification. If you can't reliably reproduce the bug pre-fix, you can't reliably verify it post-fix. Spend time getting a clean reproduction before you write any fix code. The fix is fast once you understand the reproduction; the reproduction is the slow part.

Variations to watch for

There's almost always a less obvious case where the same problem applies. The reported case is the one a player hit; the related cases hide because they're rarer or affect fewer players. After fixing the reported case, search the codebase for the pattern - one fix often unlocks several.

Adjacent bugs often share a root cause. After fixing the case you've found, spend an hour searching the codebase for similar patterns. What's the same call with different arguments? The same data flow with a different entity type? The same lifecycle issue in a sibling system? Each match is a candidate for the same fix, or a related fix that prevents future bugs of the same class.

In production

For shipping titles with a long support window, watch for this issue resurfacing after dependency updates. Engine upgrades, driver updates, OS releases - each one can resurface a bug class you thought you'd fixed because the underlying behavior changed slightly. Regression tests catch the obvious ones; player reports catch the rest.

When triaging a similar issue in production, prioritize gathering data over hypothesizing causes. A player report describes a symptom; what you need is a build SHA, a session timestamp, and ideally a screen recording or session replay. With those, the bug becomes tractable. Without them, you're guessing at hypothetical reproductions that may not match what the player actually hit.

Performance considerations

If this issue manifests under high load (many actors, many particles, many network connections), profile the post-fix code path with realistic counts. The original cost was a bug; the new cost is real work, and real work has a budget.

Diagnostic approach

The diagnostic tools available depend on your engine and platform. Use the engine's native profilers and debug overlays before reaching for external tools. The native tools have context that external tools lack - they know which subsystem owns the code, which assets are loaded, and what state the engine is in.

For Godot-specific diagnostics, the editor's profiler is the canonical starting point. Capture a representative frame with the symptom present; compare against a frame without the symptom; the diff often points directly at the cause. If the symptom is non-deterministic, capture multiple frames and look for the pattern - the cause is usually a state transition or a specific input value rather than a continuous effect.

Tooling and ecosystem

Third-party plugins often provide better diagnostics for their own behavior than the engine does. If the affected code is in a plugin, check the plugin's documentation for debug modes, verbose logging, or inspector tools - these can save hours of investigation when they exist.

Within Godot, the relevant diagnostic surfaces include the standard frame debugger, memory profiler, and engine-specific debug overlays. Each one shows a different facet of what's happening. The frame debugger reveals draw call ordering and state transitions; the memory profiler shows allocation patterns; the debug overlay reveals per-system state. Bugs that resist one tool usually surrender to another - the trick is knowing which tool to reach for first.

Edge cases and pitfalls

Platform-specific edge cases are worth enumerating explicitly. iOS handles backgrounding differently than Android; Windows handles focus changes differently than macOS. A fix that works on the development platform may not work on every target. Test on each shipping platform deliberately.

When writing a regression test for this fix, focus on the boundary conditions that surfaced the original bug. Tests that exercise the happy path catch obvious regressions; tests that exercise the boundary catch the subtler regressions that look like new bugs but are really the original returning. The latter are the tests that earn their keep over the long life of the project.

Team communication

When this bug class affects multiple teams (often the case for cross-system issues), early communication prevents duplicate work. The team that owns the symptom may not own the cause. A 15-minute conversation at the start of triage often saves hours of independent investigation.

If this fix touches a system several engineers work in, a short writeup in the team's engineering channel helps. Not a full design doc - a paragraph explaining what was wrong, what's fixed, and what to watch for. Future engineers encountering similar symptoms will search for the fix; making it findable is a small investment that pays back later.

“Black bars are a feature if you want them and a bug if you don’t. Pick the aspect mode on purpose, not by default.”

Related Issues

For related coordinate-system issues, see Fix Godot shader depth buffer access flipped. If your 2D art still looks off after fixing stretch, Fix Godot 2D sprites blurry when scaled covers the filtering side of the same problem.

Tip: switch stretch mode while the game is running to see each option in real time — Godot applies the change immediately.