SafeFrame Viewport Correction — Attempt History

Tracking what has been tried to fix fullscreen creatives inside publisher safe frame chains, what worked, and what didn't.

The Problem

Fullscreen creatives served through publisher safe frames (e.g. Schibsted/Xandr via CM360) don't scale to the device screen. They render at the safe frame's fixed dimensions (e.g. 1920x1080) on a 375px-wide phone. This is because CSS 100vw/100vh inside nested iframes resolves to the safe frame size, not the actual device — a known cross-origin iframe limitation.

See fullscreen-creative-iframe-scaling.md for the full technical analysis.

Current State (April 2026)

Fullscreen banners rely on CSS percentage-based dimensions (100% × 100%) and standard responsive scaling. No JavaScript viewport correction is in place. This works for most serving environments but may still break in specific DSP/safe frame chains where the iframe is given fixed pixel dimensions.

Known risk: Schibsted/Xandr + CM360 chains where the safe frame registers creatives at 1920x1080 — untested since the revert.

Attempt Timeline

Attempt 1: $sf.ext.geom() viewport correction in Banner.ts

Commits: 6f76dc1e, 96b7de21, 5f326aeaApproach: A script block in Banner.ts srcdoc that:

1. Guard: Only ran for fullscreen banners (bannerWidth === '100%' && bannerHeight === '100%')
2. Detection: window.innerWidth > screen.width — true only when the iframe viewport exceeds the device screen
3. Correction: Set #creative-{id} to screen.width × screen.height instead of 100vw × 100vh
4. Resize: Listened for resize events for orientation changes
5. Fallback: If it didn't trigger, existing CSS 100vw × 100vh remained

Result: Reverted in ad407f44 (April 2026). The hardcoded pixel values from $sf.ext.geom().win locked the iframe to its initial size and killed responsiveness — blank ads on mobile, broken scaling on desktop. Broke live ads on Amedia (Adnami midscroll/parallax).

Lesson: Replacing CSS responsive units with hardcoded pixel dimensions is fragile. The correction must not break creatives in non-safe-frame environments.

Attempt 2 (not implemented): visualViewport inside srcdoc

Mentioned in the revert commit (ad407f44) as a potential alternative. The idea is to use window.visualViewport API inside the srcdoc to detect actual viewport dimensions without relying on the SafeFrame API. Not yet explored.

Still Valid Approaches

The fullscreen-creative-iframe-scaling.md doc contains several proposed fixes that haven't been tried:

• CSS transform: scale() — Scale down the creative when mismatch detected, similar to the existing teadsSafariHackStyles pattern
• HTML block diagnostic script — Can be injected per-creative for testing without a product deployment
• Enabling SafeFrame for fullscreen banners — Caveat: $sf may not be available in nested CM360 iframes

Testing Constraints

This can only be tested in live ad environments. The safe frame iframe nesting (publisher → ad server → safe frame → our iframe → srcdoc) cannot be reproduced in preview or DevTools device emulation.