Flash inside an IFRAME, on Safari, breaks position

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).

This is unreal. On Safari (Mac):

Flash
...within an IFRAME (e.g., a modal window, Fancybox, etc.)
...will "break" any "position:fixed" elements also within that IFRAME.

Here's a perfect example: http://jsfiddle.net/6GP2A/ Note that we have:

An IFRAME that contains Flash (YouTube video).
within another IFRAMEd doc (jsfiddle IFRAMEs the result)

Please note that the fact that the video is itself IFRAMEd is a red herring. If the Flash were merely an OBJECT tag sans IFRAME you would run into the same issue.

If you open this in Chrome, it will work as expected. The grey "hello I am fixed" DIV (which is postion:fixed) will stay fixed to the bottom.

In Safari, the grey DIV will slide as you scroll the page.

Arrrrgh! Any advice? Countless searches have been fruitless. Thank you!

标签： html css flash safari css-position

1条回答

萌系小妹纸

2楼-- · 2019-08-05 05:44

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.

0人赞添加讨论(0) 举报

Flash inside an IFRAME, on Safari, breaks position

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间