CREATOR GUIDE · OBS TROUBLESHOOTING

OBS Browser Source resolution and layering

If an overlay looks the wrong size, soft, clipped, or hidden behind another source, check its browser viewport, scene transform, and position in the Sources list.

This guide helps you inspect OBS settings. It cannot inspect a private source or verify a hosted page or your connection.

Start with the scene where the problem appears. Work through the Browser Source properties, the OBS canvas, and the source’s transform in the preview; then check visibility and stacking order. These are troubleshooting topics creators ask about, not measurements of how often each issue occurs.

01 / TWO DIFFERENT SIZES

Separate the Browser Source viewport from the scene canvas

Browser Source Width and Height set the web page’s viewport. OBS lists 800 × 600 as the default. The viewport is separate from the scene canvas, which you can check in Settings → Video → Base (Canvas) Resolution. A source’s transform then controls how that viewport is positioned, scaled, or cropped in the scene.

The official OBS Browser Source documentation describes Width and Height as the browser page viewport. The OBS Sources Guide covers positioning, sizing, and cropping a source in the preview.

02 / SIZE MISMATCH

Compare the intended layout, viewport, and canvas

  1. Check the overlay’s intended layout. Find the dimensions the page or design was made for, including whether it is full-canvas or a smaller panel.
  2. Compare Browser Source Width and Height. Open the source properties and compare its viewport with that intended layout. These values set the page viewport; they do not set the OBS scene resolution.
  3. Check the scene canvas. In OBS, open Settings → Video and compare Base (Canvas) Resolution with the scene and overlay layout you intend to use.
  4. Inspect the selected source in the preview. Check its position, scale, and crop. Use the source bounding box or OBS Edit Transform to adjust the transform instead of changing viewport dimensions to compensate for placement.

For examples, a full-canvas overlay designed for a 16:9 scene might use 1920 × 1080; a narrow chat layout might use about 400 × 600. These are use-dependent examples, not universal OBS settings or requirements. Keep the viewport aligned with the page’s design, then position and size the source for the scene.

If you need to refine position or crop, follow the OBS Sources Guide’s transform and crop instructions.

03 / BLUR, STRETCH, OR CLIPPING

Check the artwork and preview before changing scale

  • Confirm the design and asset dimensions. Check the intended page layout and the original pixel dimensions of any images. A low-resolution asset can look pixelated when enlarged; matching Browser Source dimensions alone cannot establish that the underlying artwork or web page is sharp.
  • Inspect scaling and crop in the OBS preview. Select the source and check its bounding box, position, and crop. A crop can hide part of a layout even when the source viewport is correct.
  • Preserve the intended aspect ratio. Avoid stretching a source just to fill the canvas: OBS explains that stretching can distort the source. If the shapes look right but the source is soft, inspect OBS’s scale filtering options; the right filter depends on the content.

See the official OBS aspect-ratio, scaling, cropping, and filtering guidance for the effects of stretching and the available scale filters.

04 / SCENE LAYERING

Check visibility and source order

  1. Choose the intended scene. Confirm the active scene is the one you are editing and where the source should appear.
  2. Check visibility. In that scene’s Sources list, make sure the eye icon is on for the overlay and for the sources it should appear with.
  3. Read the stacking order. A source higher in the Sources list appears in front and can hide the sources below it.
  4. Reorder and preview. Drag a source up or down in the list, or use the up and down arrow buttons, then check the result in the preview.

If gameplay should cover an overlay, put gameplay above the overlay. If the webcam should appear over gameplay, put the webcam above gameplay.

The official OBS Sources Guide explains source order, visibility toggles, and how higher sources can cover lower ones.

05 / DIAGNOSTIC LIMITS

Know what this guide can and cannot check

This guide can help you check OBS Browser Source viewport dimensions, the scene canvas, transforms, crop, source visibility, the selected scene, and layer order. It cannot inspect your OBS session or verify a hosted provider’s URL, your account access, whether a remote page or asset is available, or a network or device failure. Radarclips cannot see or diagnose a creator’s private source.

If the OBS settings look right, check the source page or contact its provider. For OBS-specific behavior, consult the official Browser Source documentation and Sources Guide.