Skip to content

[css-sizing] Auto-resize iframes based on content #1771

Open
@tabatkins

Description

@tabatkins

In https://lists.w3.org/Archives/Public/www-style/2017Aug/0045.html, Craig Francis said:

Just re-raising the suggestion of allowing an iframe or textarea to increase its height based on its content.

Mats Palmgren suggested that I raise this issue again, as Firefox is unlikely to implement it unless the CSSWG agrees to spec it.

For iframes, this feature would allow easy and secure (isolated) embedding of third party content without issues relating to scroll bars (i.e. needing custom JavaScript to ask the parent page, via postMessage, to change the iframe height).

For textrareas, this is just a convenience feature, as trying to get JavaScript to do this is tricky (e.g. the browser can automatically add/remove scroll bars, which can throw off the calculations).

When we discussed this last time (after the @seamless attribute on the <iframe> was removed from the WHATWG spec), it was suggested that we used:

iframe,
textrarea {
    height: max-content;
}

In the case of the iframe, the child page would need to send a HTTP header (e.g. Expose-Height-Cross-Origin: 1), so it does not leak information about that website (e.g. if the user is logged in).

PS: This has been discussed in a number of times before, the earliest one I've found is 16 years old:

https://bugzilla.mozilla.org/show_bug.cgi?id=80713

And I've written up some notes about this feature, which includes the suggestion of using it for element height animation (e.g. disclosure widgets):

https://github.com/craigfrancis/iframe-height

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions