fix: Use the form background behind the fullscreen mobile popup

[claude]

Requested by Pol Borrellas · Slack thread

Before

On iPhone Safari (iOS 18+) a popup embed fills the viewport, but the status bar and the bottom toolbar are painted dark grey. Safari derives the bar colour from the fixed .tf-v1-popup container's own rgba(0, 0, 0, 0.75) background blended over the host page's body colour, so the form reads as a coloured band between two dark bars instead of edge to edge. This happens on any host page that uses createPopup on a phone; Typeform Pages hit it with every popup-mode embed.

After

On viewports of 480px and below, the popup container takes the form's own background colour as soon as the form reports its theme (the same form-theme message the widget fullscreen modal already listens to), so Safari paints the bars in the form colour and the form reads edge to edge. Desktop popups keep the dark scrim, and before the theme message arrives the scrim is unchanged on mobile too.

How

createPopup registers a getFormThemeHandler listener for its own embedId and sets a --tf-popup-background custom property on the .tf-v1-popup element. popup.scss consumes it only inside the existing @include mobile (max-width: 480px) block, with rgba(0, 0, 0, 0.75) as the fallback so the backdrop mixin's scrim is preserved. changeColorOpacity forces the colour opaque, like the widget fullscreen path does, so nothing from the host page bleeds through.

Testing

• Jest: new spec in create-popup.spec.ts checks that a form-theme message for the popup's embedId sets the custom property to the opaque colour and that a message for another embedId leaves it untouched. yarn jest src/factories/create-popup, yarn lint and yarn build pass; the built build/css/popup.css contains the var() rule inside the (max-width: 480px) media query.
• Chromium (Playwright, emulated iPhone 14 at 390px): after posting form-theme with theme.backgroundColor: 'rgb(244, 208, 111)', getComputedStyle(.tf-v1-popup).backgroundColor is rgb(244, 208, 111); at a 1024px desktop viewport it stays rgba(0, 0, 0, 0.75).
• The actual status bar / toolbar colouring can only be confirmed on a real iPhone: open a popup embed on a phone and check that the status bar and toolbar match the form background.

Slider, popover and sidetab share the same backdrop mixin and could get the same treatment in a follow-up.

QA plan

Scope: only the .tf-v1-popup container on viewports ≤480px. The JS sets a CSS custom property from the form's form-theme message; the CSS reads it only inside the mobile media query. Nothing else in the SDK changes.

Target behaviour (iPhone, iOS 18+, Safari, Settings → Safari → "Allow Website Tinting" on)

1. Typeform Page with an inline form block: tap the form so the popup opens. Once the form has loaded, the status bar and bottom toolbar show the form's background colour, no dark grey bands. Check in light and dark mode.
2. Typeform Page button linked to a form: same result.
3. Form whose theme has a background image or a translucent background: the bars use the theme colour as an opaque colour.
4. Close and reopen the popup (including a keepSession: true popup); rotate to landscape and back: bars keep the form colour.
5. Slow network: the dark scrim shows while the form loads, then switches to the form colour when the form reports its theme; no flash back to dark afterwards.

Regression checks

6. Desktop (>480px) in Chrome, Safari, Firefox: popup unchanged, dark rgba(0,0,0,.75) scrim, 8px-radius card, close button in place.
7. Desktop window resized across 480px with the popup open: scrim switches between dark and form colour with the breakpoint, no stale colour.
8. iPad portrait (768px): unchanged (dark scrim, inset card).
9. Android Chrome phone: popup still fullscreen, address bar colour unchanged (it follows theme-color, not this container).
10. Two popups for different forms on one page: each popup takes its own form colour (message is scoped by embed id).
11. Other embed types unchanged on phone and desktop: inline widget (including its fullscreen modal on mobile), slider, popover, sidetab.
12. All three popup entry points behave the same: data-tf-popup attribute embed (CSS auto-loaded from the CDN), JS createPopup, React PopupButton.
13. iPhone on iOS 17 or older: bars stay Safari's default colour (as today), no console errors.
14. Typeform Pages builder: unaffected (no popup in editable mode).

Automated

• Unit spec should set the popup background from the form theme in create-popup.spec.ts (passes).
• Chromium computed-style check at 390px and 1024px (passes).
• The repo's Cypress functional and visual suites are red on every PR since July (pre-existing), so run them locally before relying on them for this change.

Release path

Merge triggers semantic-release (patch of @typeform/embed) and the CDN deploy of embed.typeform.com/next, so attribute-based embeds on any site pick the change up immediately. npm consumers such as Typeform Pages need an @typeform/embed-react bump, after which the Pages page from the report should be re-checked on a phone.

🤖 Generated with Claude Code

https://claude.ai/code/session_01RkM7Yh51Sqg4iADSZnyJXL

---

Generated by Claude Code

[claude]

CI status on de68699

Passing: build-lint-test - node 24, ci-standard-checks.

Failing: deploy_preview (step yarn release:preview), functional (step yarn test:functional), visual (Visual Tests workflow, step yarn test:visual).

These three failures are pre-existing and not caused by this PR. They have failed identically on every PR run in this repo since late July 2026, including dependency-only and CI-only PRs:

• PR fix(security): Fix security issue in next via minor version upgrade from 15.4.8 to 15.5.24 #767 (2026-09-17): run 35185124436, run 35185124408
• PR ci(NOJIRA-1234): Extend bot automerge to smartling and aikido #761 (2026-09-09): run 34374268905
• Last green runs: PR chore(PLT-3524): remove SonarCloud setup #746 (2026-07-17): run 29576555512

This PR changes 33 lines (popup.scss, create-popup.ts and its spec) and cannot affect the preview publisher or the Cypress functional/VRT infrastructure. No fix for those jobs exists in the repo yet, so this PR does not attempt one.

Note: the job logs could not be read from this environment (the log storage host is blocked), so the exact failing lines should be confirmed from the job pages.

Coverage for this change: the unit spec should set the popup background from the form theme in create-popup.spec.ts plus a Chromium computed-style check at 390px and 1024px.

---

Generated by Claude Code