v152 · HTML · Frames

Responsively-sized <iframe>

Chrome 152 lets sites opt into iframes that automatically resize in the parent document to match the embedded document's layout overflow. No JavaScript message-passing required — the browser propagates the content size across the frame boundary.

concepts

  1. Live Resize Demo

    A pair of iframes side-by-side: one fixed-height (the old behaviour) and one opted-in to responsive sizing. Adjust the content height slider to watch the responsive iframe grow and shrink with its content while the fixed one clips or scrolls.

  2. Opt-in Mechanism

    Step-by-step walkthrough of the opt-in attribute and the HTTP response header that must be set on the embedded document. Compares the old postMessage-based workaround with the new declarative approach.

  3. postMessage Comparison

    Two panels: a working old-style postMessage resize simulation (ResizeObserver on the child, message handler on the parent) vs the new allow-responsive-sizing + Supports-Responsive-Sizing: 1 approach. Add items and watch both panels grow — one via an 80ms simulated round-trip, one instantly as the browser propagates layout overflow with no script.

  4. Accordion Embed

    A simulated FAQ accordion embedded as an iframe. The old approach clips content because the height is fixed; the new approach tracks accordion expand/collapse exactly — the iframe grows and shrinks with the content, zero JavaScript on either side.

  5. Cross-Origin Simulation

    Walk through each step of the cross-origin resize flow — the six-step postMessage + ResizeObserver approach versus the three-step declarative approach. Run both side by side and see an animated trace with timing. Includes a comparison table covering script requirements, origin validation, layout sync, and fallback behaviour.

  6. Dynamic Content Feed

    A social feed widget that grows as posts load — the canonical use case for responsive iframe sizing. Left panel: fixed-height iframe that clips content and forces a scrollbar inside the embed. Right panel: responsive iframe that grows with each new post, letting the parent page scroll naturally. An adjustable post-addition delay and a resize event log show lag introduced by the postMessage round-trip that native resize propagation eliminates.

    Interactive Social embed UX

why it shipped

Embedding third-party or same-origin content in an <iframe> has always forced developers to pick a fixed height upfront or implement a fragile cross-frame messaging contract. The postMessage workaround — where the child posts its scrollHeight and the parent resizes the element — requires script on both sides, breaks across origins without a cooperative server, and fires before the layout is fully settled. Chrome 152 adds a declarative opt-in: the embedded document signals consent via an HTTP header, the embedder opts in via an element attribute, and the browser handles the plumbing. The result is reliable, synchronised resizing that works with CSS-driven dynamic content changes without any JavaScript on either side.

key API surface

references