Scroll-Based Resize Detection Test

There is no native method or event to detect the resizing of an element on the page. Resize events are only fired for page contexts (which includes iframes). To detect a resize of a specific element, there are two primary methods:

1. Create an iframe associated with the size of the element and listen for the iframe's resize event.
2. Construct a pair of scrollbars the same size as the element, where one will be scrolled automatically depending on whether the element grew or shrank, indicating a resize of the element.

Iframes are very inefficient, but well supported and very compressable. The scrollbar method doesn't work on some browsers because only user-triggered scroll events are fired. Programmatic resizes of scrollable elements will not trigger a scroll event. This page contains a test to determine if a given browser will trigger scroll events on programmatic element resizes.

Test Results

Conclusion

Since the use case for onfontready is to create tests for fonts and then quickly shut them down, rather than remaining on the page for long periods, the advantages to compression and wide-reaching support of the iframe method is the preferred solution to detecting element resizes.

Test