Iframes that finally fit their content

Chrome 154 introduces a feature that allows iframes to automatically adjust their height to match their content. This eliminates the need for measuring content height, sending messages, or using resize scripts. However, for this feature to work, the page inside the iframe must agree to it.

Many checkout pages use payment provider iframes to create a seamless experience for users. The goal is to make the payment form feel like a part of the page, without any noticeable gap or scrollbar. Traditionally, achieving this required increasing the iframe height, testing on different devices, and adjusting it again. This process was cumbersome and required JavaScript communication between the parent page and the iframe content.

The new feature simplifies this process. It only requires one line of CSS to make the iframe fit its content. However, there's a catch - the page inside the iframe must agree to this. This is done by adding a meta tag in the iframe's head and specifying which websites are allowed to size it.

This feature is particularly beneficial for dynamic content that changes height, such as payment forms, comment sections, contact forms, newsletter sign-ups, and booking widgets. These elements often rely on the embedded page for their height, and with this feature, they can now adjust smoothly. However, this feature is not yet supported in Firefox and Safari.

When implementing this feature, it's important to list only the websites that need access to the iframe's height. This is to prevent potential information leaks. Also, a sensible min-height should be used to prevent layout shift, which can negatively impact Core Web Vitals.