Question

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

Answer 1

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

Answer 2

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

我有类似的问题;

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

要重现，请使用以下代码段：

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

小提琴：

在flash元素上使用translate3d的Firefox bug

2 个答案:

With transform

Without transform