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><framesetrows="20,*"><frame>...</frame><frame><divclass="menu">Header</div><!-- Some content here --><objectwidth="440px"height="220px"><paramvalue="opaque"name="wmode"><paramvalue="http://youdomain.com/you_flash.swf"name="movie"><embedwidth="440px"height="220px"type="application/x-shockwave-flash"src="http://youdomain.com/you_flash.swf"></object><!-- Some content here --><divstyle="position: relative; z-index:-1;"><objectwidth="10px"height="10px"><paramvalue="opaque"name="wmode"><paramvalue="http://youdomain.com/fake_flash.swf"name="movie"><embedwidth="10px"height="10px"type="application/x-shockwave-flash"src="http://youdomain.com/fake_flash.swf"></object></div><divclass="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"