在flash元素上使用translate3d的Firefox bug

时间:2012-12-14 16:28:29

标签: flash firefox css3 translate3d

FireFox中存在一个错误,其中任何转换了父(或祖先)元素的flash元素都不会被渲染。如果翻译被删除,则会立即显示。

以下是一个例子:

<!DOCTYPE html>
<html>
    <head>
        <title>FireSucks</title>
        <style>
.translated {
    height: 315px;
    width: 560px;
    transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1);
}
        </style>
    </head>
    <body>
        <div class="translated">
            <iframe width="560" height="315" src="https://www.youtube.com/embed/bxAvgm0EXpI" frameborder="0" allowfullscreen></iframe>
        </div>
    </body>
</html>

我在Chrome中测试了相同的代码并且它没有问题渲染,使用HTML5视频似乎是唯一的选择,但我想知道这是否可以修复。

由于

更新

此处有错误报告 - https://bugzilla.mozilla.org/show_bug.cgi?id=819763#c0

2 个答案:

答案 0 :(得分:0)

与错误报告中提到的消息之一一样,Firefox不支持要转换的窗口插件。 将wmode设置为wmode=transparentwmode=opaque可以将问题解决为在那里消化。

答案 1 :(得分:0)

这不是一个真正的答案,但我想这值得分享:

我有类似的问题;

但在我的情况下,Flash播放器已呈现,但由于position:absolutetransform: translate(0,0)的组合,鼠标位置在Flash播放器中不正确。 因此,虽然显示了悬停,但实际命中区域点击是topleft值的负偏移。

要重现,请使用以下代码段:

<style>
#video{
  position: absolute;
  top: 200px;
  left: 200px;
  transform: translate(0, 0);
}
</style>

<div id="video">
  <iframe src="http://player.vimeo.com/video/18043595" width="960" height="540" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>

小提琴:

With transform

Without transform