When a modal popup is rendered the background is calculated from the viewport of the client; so the height and width are taken into account. An IFRAME and a DIV are generated with this height and width to cover the page. These elements are styled with a position:absolute however, making them relative to a parent element with a position:relative. This is incorrect, since the size of the viewport is measured, not the size of this element. The correct styling has to be position:fixed.

Unfortunately the generated DIV does not have any id or class attribute, making it impossible to override this setting from a CSS file. I wonder if the DIV needs to be generated at all, but it may be necessary for older browsers (???) Maybe someone can confirm this.

The following code is generated for the modal popups:

<iframe title="Ice Modal Frame" id="iceModalFramej_id32:j_id299" src="/myproject/xmlhttp/blank" style="z-index: 25000; opacity: 0.5; position: absolute; visibility: visible; background-color: black; border-width: 0pt; top: 0pt; left: 0pt; width: 1324px; height: 1019px;"></iframe>
<div style="position: absolute; z-index: 25001; background-color: transparent; left: 0px; top: 0px; width: 1324px; height: 1019px;"></div>
<!--- popup div and content -->

When the positioning is set to fixed, all will work as expected, even when the code is put in a parent element that is position relative. This cannot always be altered, in our case, because we are running inside a portal.