Question

情况如下：两个绝对定位的层，相同的位置和尺寸。顶层包含一个跨越整个图层的Flash影片，嵌入wmode="transparent"底层包含一个大部分可见的HTML链接。

在一个奇怪的事件周转中，IE7和IE8按预期渲染页面：Flash电影是可见的，鼠标互动;并且电影下方的链接部分可见且与鼠标互动。在FF3.6和Chrome 8中，链接可见但无法点击。

示例

http://www.powers1.net/flash-test/test2.html

代码

<html>
<head>
<title>test</title>
</head>
<body bgcolor="#eeeeee">
    <div style="position: absolute; top: 0px; left: 0px; z-index: 1; width: 550px; height: 400px; overflow: hidden">
        <p><a href="http://www.google.com">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</a></p>
    </div>
    <div style="position: absolute; top: 0px; left: 0px; z-index: 2">
    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="550" height="400" id="test" align="middle">
    <param name="allowScriptAccess" value="sameDomain" />
    <param name="allowFullScreen" value="false" />
    <param name="movie" value="test.swf" /><param name="quality" value="high" /><param name="wmode" value="transparent" /><param name="bgcolor" value="#ffffff" />
    <embed src="test.swf" quality="high" wmode="transparent" bgcolor="#ffffff" width="550" height="400" name="test" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" />
    </object>
    </div>
</body>
</html>

问题

如何让FF，Chrome和其他浏览器模仿此行为？

Answer 1

wmode = transparent和wmode = opaque是邪恶的。这就是原因：

•当涉及到如何使用内容呈现它时，它在不同浏览器之间的工作非常糟糕。正如你所观察到的那样，有时候舞台会让点击流过，有时候不会......当你试图在闪光灯上叠加html内容时，你会在闪光灯中闪烁......等等。

•它会杀死闪存性能，并用它拖动用户机器（导致CPU使用率飙升）..这主要是因为Flash播放器被迫通过浏览器而不是直接发送到GPU的渲染方向... aaand当它从视图中隐藏时，它无法智能地降低其FPS。

•随机，上帝知道他们来自Flash中出现的错误，一旦你将wmode翻转到其中一个糟糕的选项中......我已经看到了第一手文字渲染错误，形状绘制错误，和externalInterface在删除wmode参数后会神奇地消失的bug，或者将其切换到其他更友好的值之一。

您是否考虑过制作混合动力车？一种解决方案，你有几个swf电影 - 他们的x / y在由HTML控制的浏览器窗口？我猜你仍然需要使用wmode = transparent来将其分层到页面的其余部分，但至少你一直能够点击下面的内容...

Flash wmode透明 - 点击后面

1 个答案: