Technical review: Document responsive iframe sizing#44598
Open
chrisdavidmills wants to merge 1 commit into
Open
Technical review: Document responsive iframe sizing#44598chrisdavidmills wants to merge 1 commit into
chrisdavidmills wants to merge 1 commit into
Conversation
chrisdavidmills
requested review from
estelle and
hamishwillee
and removed request for
a team
github-actions
Bot
added
Content:CSS
chrisdavidmills
changed the title
Contributor
Preview URLs (6 pages)Flaws (3) Note! 4 documents with no flaws that don't need to be listed. 🎉 Found an unexpected or unresolvable flaw? Please report it here. URL:
URL:
External URLs (2)URL:
URL:
|
kojiishi
reviewed
Jul 7, 2026
|
|
||
| To enable responsive sizing of {{htmlelement("iframe")}} elements based on their content, the [`<meta name="responsive-embedded-sizing">`](/en-US/docs/Web/HTML/Reference/Elements/meta/name/responsive-embedded-sizing) tag can be included in an embedded document to opt it in to sharing its size information with the parent page. The {{cssxref("frame-sizing")}} CSS property can then be set on the `<iframe>` to cause it to adopt the same horizontal or vertical size as the embedded content's actual content size (termed the **internal layout intrinsic size** in the spec). This is useful for avoiding scrollbars on embedded content so that it fits more seamlessly with its embedder. | ||
|
|
||
| To resize the `<iframe>` dynamically as the embedded content changes size, you can call the {{domxref("Window.requestResize()")}} method from the embedded page to make it report an updated size, typically from within the event handler that caused the content to change size. If the `<iframe>` is sized using `frame-sizing`, it will then update its size automatically so that it still neatly contains the embeded content. |
There was a problem hiding this comment.
How about mentioning that the size is updated on DOMContentLoad and Load events automatically, and this method provides additional timing? Is this redundant?
| To enable responsive sizing of {{htmlelement("iframe")}} elements based on their content, the [`<meta name="responsive-embedded-sizing">`](/en-US/docs/Web/HTML/Reference/Elements/meta/name/responsive-embedded-sizing) tag can be included in an embedded document to opt it in to sharing its size information with the parent page. The {{cssxref("frame-sizing")}} CSS property can then be set on the `<iframe>` to cause it to adopt the same horizontal or vertical size as the embedded content's actual content size (termed the **internal layout intrinsic size** in the spec). This is useful for avoiding scrollbars on embedded content so that it fits more seamlessly with its embedder. | ||
|
|
||
| To resize the `<iframe>` dynamically as the embedded content changes size, you can call the {{domxref("Window.requestResize()")}} method from the embedded page to make it report an updated size, typically from within the event handler that caused the content to change size. If the `<iframe>` is sized using `frame-sizing`, it will then update its size automatically so that it still neatly contains the embeded content. | ||
|
|
There was a problem hiding this comment.
How about also describing it'd raise an error if the child didn't opt-in? Is this too much details?
Please see the CSS spec for requestResize for the details of the errors.
Maybe also nice to mention that, if the parent doesn't opt-in (by the frame-sizing property), it doesn't cause an error, but the iframe will not be resized?
|
|
||
| {{APIRef}} | ||
|
|
||
| The **`requestResize()`** method of the {{domxref("Window")}} interface updates the size information shared by an embedded document with its embedding parent, but only if the embedded page has opted in to sharing its size information. |
There was a problem hiding this comment.
I see it sometimes say "embedded document", "embedded page", or "embedded content". Are they intentionally differentiated?
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Chrome 149 adds support for responsive iframe sizing; see https://chromestatus.com/feature/5108373464547328 (it says 151, but the feature still seems to be behind a pref, since 149).
This relies on three new features:
frame-sizingpropertyWindow.requestResizemethod<meta name=responsive-embedded-sizing>meta tagThis PR adds docs for all three features.
Motivation
Additional details
Related issues and pull requests