iframe shim example

HTML div here. (Red rectangle) HTML div here. (Red rectangle) HTML div here. (Red rectangle) HTML div here. (Red rectangle) HTML div here. (Red rectangle) HTML div here. (Red rectangle) HTML div here. (Red rectangle) HTML div here. (Red rectangle) HTML div here. (Red rectangle) HTML div here. (Red rectangle) HTML div here. (Red rectangle) HTML div here. (Red rectangle) HTML div here. (Red rectangle) HTML div here. (Red rectangle) HTML div here. (Red rectangle) HTML div here. (Red rectangle) HTML div here. (Red rectangle) HTML div here. (Red rectangle) HTML div here. (Red rectangle) HTML div here. (Red rectangle) HTML div here. (Red rectangle) HTML div here. (Red rectangle) HTML div here. (Red rectangle)

Inline and dynamic iframes with a Java applet / plugin.

Playground for dynamic plugin & iframes:

Create iframe:

Operate on last iframe:

set z-index on last iframe:

set opacity on last iframe:

Demonstration of using iframe shims to overlay HTML on windowed plugins.

"Patched Chrome" is based on this patch

Quirks/observations:

Aspect IE7+WinXP FF2+(WinXP,Linux) FF3+WinXP patched Chrome + WinXP

Flash clipping OK Flash on Linux is OK. Flash on Windows often doesn't respect the iframe. If you hide and then expose the window, the shim does seem to have an effect on display, though you can't select the HTML text. Other types of plugins respect the shim though. Is Flash doing something peculiar? OK

unequal z-index
Respects z-index.

Clipping seems to be based solely on order of creation, not on z-index. A dynamically created shim can clip the plugin, even though it has negative z-index and is not visible.

iframes with negative z-index are invisible.

Respects z-index.

Non-clipping related:

The Inline iframes with negative z-index iframes are visible above the page background, but can't be interacted with. I.e. mouse events don't reach the iframe.

equal z-index iframe at same z-index always clips plugin, regardless of creation/document order. Ignored; see above. iframe at same z-index always clips plugin, regardless of creation/document order.

Order that iframes appear in document. Irrelevant. Inline iframes are apparently always behind plugins. To clip a plugin, you have to dynamically create the iframe after the plugin is created. Irrelevant.

Page scrolling Visual layering breaks when scrolling the page, until someone triggers a repaint. OK OK

visibility:hidden and display:none iframe disappears and no longer clips plugin

opacity The iframe clips the plugin as usual. The iframe blends with whatever is behind the plugin, as if the plugin were not there.

Summary of iframe vs. plugin clipping:

IE7 and patched Chrome

FF2 and FF3

Aspect	IE7+WinXP	FF2+(WinXP,Linux)	patched Chrome + WinXP
Flash clipping	OK	Flash on Linux is OK. Flash on Windows often doesn't respect the iframe. If you hide and then expose the window, the shim does seem to have an effect on display, though you can't select the HTML text. Other types of plugins respect the shim though. Is Flash doing something peculiar?	OK
unequal z-index	Respects z-index.	Clipping seems to be based solely on order of creation, not on z-index. A dynamically created shim can clip the plugin, even though it has negative z-index and is not visible. iframes with negative z-index are invisible.	Respects z-index. Non-clipping related: The Inline iframes with negative z-index iframes are visible above the page background, but can't be interacted with. I.e. mouse events don't reach the iframe.
equal z-index	iframe at same z-index always clips plugin, regardless of creation/document order.	Ignored; see above.	iframe at same z-index always clips plugin, regardless of creation/document order.
Order that iframes appear in document.	Irrelevant.	Inline iframes are apparently always behind plugins. To clip a plugin, you have to dynamically create the iframe after the plugin is created.	Irrelevant.
Page scrolling	Visual layering breaks when scrolling the page, until someone triggers a repaint.	OK	OK
visibility:hidden and display:none	iframe disappears and no longer clips plugin
opacity	The iframe clips the plugin as usual. The iframe blends with whatever is behind the plugin, as if the plugin were not there.