[csswg-drafts] [css-sizing] How should auto-sizing of iframes work? (#12229)

chrishtr has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-sizing] How should auto-sizing of iframes work? ==
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.)






Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12229 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 23 May 2025 16:31:07 UTC