Skip to content Skip to sidebar Skip to footer

Flash Inside An IFRAME, On Safari, Breaks Position:fixed Elements

Updated this as I found it is not necessarily nested IFRAMEs, but merely the presence of Flash within the IFRAMEd document that will break position:fixed (also within the IFRAME).

Solution 1:

I encountered the same problem, but we cannot refuse to frames. So I investigate this problem and I found some solution (I guess):

When there is a div with nested flash in necessary frame and the style of the div with "position: relative; z-index: -1;" then elements with "position: fixed" in the frame looks fine.

For example

<html>
<head>
    <style> 
       .menu {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 40px;
       }
       .footer {
          width: 100%;
          height: 40px;
          position: fixed;
          bottom: 0;
          left: 0;
       }
    </style>
</head>
<body>
    <frameset rows="20,*">
        <frame>...</frame>
        <frame>
            <div class="menu">Header</div>
            <!-- Some content here -->
            <object width="440px" height="220px">
                <param value="opaque" name="wmode">
                <param value="http://youdomain.com/you_flash.swf" name="movie">
                <embed width="440px" height="220px" type="application/x-shockwave-flash" src="http://youdomain.com/you_flash.swf">
            </object>
            <!-- Some content here -->
            <div style="position: relative; z-index:-1;">
                <object width="10px" height="10px">
                    <param value="opaque" name="wmode">
                    <param value="http://youdomain.com/fake_flash.swf" name="movie">
                    <embed width="10px" height="10px" type="application/x-shockwave-flash" src="http://youdomain.com/fake_flash.swf">
                </object>
            </div>
            <div class="menu">Footer</div>
        </frame>
    </frameset>
</body>
</html>

One div with a flash is enough. All the other may be as is.

One remark - you wouldn't be able to click on the flash in this div. I wrote a script which will dynamically add the div with empty flash to Safari on Mac.

Hope this is helpful.

May the Force be with you.


Post a Comment for "Flash Inside An IFRAME, On Safari, Breaks Position:fixed Elements"