Skip to content

[css-sizing] How should auto-sizing of iframes work? #12229

Open
@chrishtr

Description

@chrishtr

In #1771 we resolved to add the ability for an <iframe> to opt into resizing to match its content document's sizing, similar to how other elements do so, via a contain-intrinsic-size: from-element opt-in CSS property on the <iframe> element and a similar opt-in from the iframe content document (either attribute or meta tag).

However, in that discussion it was proposed that the iframe contents document would explicitly request particular width and height dimensions via the attribute/meta tag. With that setup, the sizing of the iframe would not automatically match the natural sizing of the document contents, and would need to be manually updated by script when the natural sizing changes.

A number of use cases raised in #1771 and elsewhere would benefit from changing to automatic sizing based on the layout size of the iframe content document. Automatic sizing would be ideal if we can achieve it, because everything would just work and the author wouldn't have to write scripts to observe document layout.

Auto-sizing has several challenges:

  • Infinite loops / hysteresis: how to avoid layout thrashing or infinite loops due to the dependency of the <iframe> on its contents, and the contents on the <iframe>. This mutual dependency could also cause an iframe with the same contents ending up with a different size depending on the sequences of layout after load.
  • Performance: iframe documents that often change size could cause excessive layout work. Nested responsive iframes could induce exponential runtime costs.
  • Definition: which values from the iframe content document layout should be used to size the <iframe>?

Note also that these challenges are not really unique to auto-sizing, since if an author pollyfills auto-sizing the same challenges will result.

Here are some possible approaches to the above problems:

  • Infinite loops / hysteresis: always lay out an iframe content document with the same initial viewport size. (TODO: but which size should this be?)
  • Performance: Only automatically perform one layout after the load event of the iframe. (Pro: simple, should work. Con: not responsive to content streaming in later, such as in comment widgets; also does not resize when the browser window resizes.)
  • Performance: limit responsive iframe depth, or always lay out an iframe content document with the same initial viewport size.
  • Definition: Use the layout height of the iframe document contents as input to the <iframe> sizing, but not the layout width of the iframe document. (Pro: content commonly fills horizontally to the space available and then wraps, and adjusts its height to contain all content.)

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions