[2026-04 regression] POS Scanner camera now renders as a full-screen overlay that hides all extension UI (iPhone and iPad)

[Jeff_Blake]

Summary

On a POS UI extension (Polaris web components / Preact) modal target, shopify.scanner.showCameraScanner() changed behavior between API versions:

• api_version = "2026-01" — the camera preview renders in-flow inside the modal. Our extension’s scan result, status, and mode selector lay out below/around it and remain visible while the camera is live.
• api_version = "2026-04" — the same call now renders a full-screen, z-stacked camera overlay that completely covers all extension UI. The scan result and the mode tabs are no longer visible or reachable while the camera is active.

This happens on both iPhone and iPad (on 2026-01, iPad even showed a side detail panel alongside the camera). It is a regression for any extension that displays scan results and controls alongside a live camera — i.e. high-volume scanning workflows.

Environment

• Extension type: POS UI extension, Polaris web components (Preact), modal target (pos.home.modal.render)
• API: imperative Scanner API — shopify.scanner.showCameraScanner() / scannerData subscription
• Shopify POS app: observed across 11.3.2 → 11.7.0
• OS: iOS 26.x
• Devices: iPhone and iPad (multiple models)
• Difference is purely the extension’s api_version (2026-01 → 2026-04); no code change.

Expected vs. actual

Expected (2026-01 behavior): the camera preview occupies part of the modal and the extension’s own UI (scan result + mode selector) lays out with it, so the operator can scan, read the result, and switch modes without dismissing the camera.

Actual (2026-04): the camera is a full-screen overlay. The extension UI renders behind it and is only visible after the camera is dismissed.

Screenshots (attach in this order):

1. 2026_01_phone.PNG — 2026-01, iPhone: camera in-flow at top; “Ready To Scan” + Lookup/Check-In mode tabs visible below. Works.
2. 2026_01_tablet.PNG — 2026-01, iPad: camera + scan result (“Already Used”) + mode tabs + a right-hand ticket-detail panel, all visible together. Works.
3. 2026_04_phone_camera.PNG — 2026-04, iPhone, camera active: full-screen camera overlay. No header, no result, no mode tabs — only the system close/flip buttons.
4. 2026_04_phone_camera_dismissed.PNG — 2026-04, iPhone, camera dismissed: the same extension UI (header, “Ready To Scan”, mode tabs) is present — it was simply hidden behind the overlay. Camera or UI, never both.
5. 2026_04_tablet.PNG — 2026-04, iPad: the overlay fills the entire modal; the result panel and tabs that 2026-01 showed are gone.

Steps to reproduce

1. POS UI extension (web components / Preact), action/modal target.
2. Render some content in the <s-page> (e.g. a result area and an <s-tabs> control).
3. Call shopify.scanner.showCameraScanner().
4. Open the modal on iPhone or iPad.
   • On api_version = "2026-01": your page content is visible with the camera.
   • On api_version = "2026-04": your page content is hidden behind a full-screen camera overlay.

Impact

This breaks high-volume, content-rich scanning — the exact use case the docs cite for camera scanning (barcode lookup / check-in). With the result and mode selector hidden behind a full-screen camera, an operator can’t see who they just scanned or switch scan modes without dismissing and re-opening the camera, which kills throughput at a gate/door.

For context, this is the inverse of the “pushed-down layout” some developers asked to have fixed (see references). For result-driven scanning UIs, the in-flow layout was load-bearing — and on the Polaris web-components stack there is no workaround: the docs state showCameraScanner() “displays a full-screen system camera overlay,” there is no sized/inline camera option, and the inline CameraScanner component is not available in web components (see references).

Ask

Either of:

1. Restore the in-flow camera layout for showCameraScanner() (or make full-screen vs. in-flow opt-in via a prop), so extension UI can coexist with the live camera as it did on 2026-01; or
2. Provide a sized / embeddable camera-preview element for Polaris web components — parity with the legacy CameraScanner component — so we can place the preview within our own layout.

References

• Scanner camera preview layout — Can't get Scanner preview layout rendering correctly
• Camera scanner not available for Polaris Web Components — Camera scanner not available for Polaris Web Components