Skip to content
iframe-resizer

Performance

On most pages iframe-resizer is able to detect changes in the iframe, recalculate the page size and adjust the iframe in sub nanosecond time. The time it takes to recalculate the size of the iframe is monitored by iframe-resizer and unless it tells you it has detected an issue with your page content, you can skip the rest of this page.

Content outside of the body element

By default iframe-resizer uses the size of the <html> element to calculate the size of the iframe’s content. However, if their are page elements, that due to CSS cause content to not be fully contained within the root document element, then this can lead to the <html> element to not correctly reflect the iframe’s content size.

To overcome this, iframe-resizer maintains a realtime Set of page element that don’t 100% intersect with the root document element by using the intersectionObserver browser API. This set of non-intersecting elements is then used to check the overall content size.

In the unlikely event that you have a large number of overflowing or not fully intersecting elements on the page, it may take an few milliseconds to calculate the page size. In this situation you have two options to improve performance.

  1. Adjust CSS and page design to keep most page elements inside of the <body> element.

  2. Explicitly designate which page element should be used to track the page size, by directly adding a data-iframe-size attribute or using the sizeSelector option to specify the elements to be used for sizing the content.

    With both methods you can specify multiple elements and the one that returns the highest value will be used each time the page size is calculated. However, these should be used sparingly, as the more elements selected on the page, the greater the amount of work required to calculate the page size.

    It may also be useful to set the offsetSize option, which allows the adjustment of the returned size value from the iframe.

If iframe-resizer detects page content is having an excessive impact on performance, it will log a warning to the browser console to advise you to add a data-iframe-size to an element on your page.

Was this page useful?