Responsive iframesLimited availability

The frame-sizing CSS property sets the size of an <iframe> element to that of it contents, to avoid scrolling in the iframe. Embedded documents allow this with the <meta name="responsive-embedded-sizing"> element and request resizing in the embedding page by calling window.requestResize().

Not yet supported in all major browsers — check the table and provide a fallback.

How to use ↓Compare browsers

Browser support

DesktopChrome

1–153Not supported

154+Supportedsince Sep 22, 2026

Current: 155

Edge

12–153Not supported

154+Supportedsince Sep 24, 2026

Current: 154

Firefox

✕Not supportedup to 157

Current: 157

Safari

✕Not supportedup to 27

Current: 27

MobileChrome Android

18–153Not supported

154+Supportedsince Sep 22, 2026

Current: 155

Firefox Android

✕Not supportedup to 157

Current: 157

Safari iOS

✕Not supportedup to 27

Current: 27

How to use

Not supported in Firefox, Safari, Firefox Android, Safari iOS. Use feature detection below and provide a fallback (or a polyfill) for those browsers.

Example

Full syntax and examples are on MDN: requestResize.

Feature detection

CSS · check before using

@supports (frame-sizing: initial) {
  /* styles that rely on frame-sizing */
}

/* or in JavaScript */
if (CSS.supports("frame-sizing", "initial")) {
  // use it
}

Documentation (MDN)

Specification

drafts.csswg.org#propdef-frame-sizing ↗

Sub-features

Support for each part of the feature (8). The overall table above shows when the whole feature works.

Sub-feature	Chrome	Edge	Firefox	Safari	Chrome Android	Firefox Android	Safari iOS
Window.requestResize	154	154	✕	✕	154	✕	✕
frame-sizing	154	154	✕	✕	154	✕	✕
frame-sizing.auto	154	154	✕	✕	154	✕	✕
frame-sizing.content-block-size	154	154	✕	✕	154	✕	✕
frame-sizing.content-height	154	154	✕	✕	154	✕	✕
frame-sizing.content-inline-size	154	154	✕	✕	154	✕	✕
frame-sizing.content-width	154	154	✕	✕	154	✕	✕
meta.name.responsive-embedded-sizing	154	154	✕	✕	154	✕	✕