Firefox bug with translate3d on a flash element

Question

There is a bug in FireFox in which any flash element who's parent (or ancestor) element is translated will be not be rendered. If the translation is removed it immediately appears.

Here's an example:

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

I've tested the same code in Chrome and it renders without issue, using HTML5 video seems like the only option, but I'd like to know if this is fixable.

Thanks

Update:

There is a bug report here - https://bugzilla.mozilla.org/show_bug.cgi?id=819763#c0

score 0 · Answer 1 · answered Feb 14 '13 at 16:28

0

Like one of the messages in the bug report mentions, Firefox does not support windowed plugins to be transformed. Setting wmode to wmode=transparent or wmode=opaque should fix the problem as sugested there.

answered Feb 14 '13 at 16:28

WesleyE

1,384
1
12
29

I saw that and tried setting both wmode="transparent" and wmode="opaque" directly on the tag for the flash, but neither had any effect. pastie: http://pastie.org/6231819, fiddle: http://jsfiddle.net/KLJkv. – Luke Channings Feb 19 '13 at 23:23

score 0 · Answer 2 · answered Jul 09 '13 at 14:41

This is not really an answer, but I guess it's worth sharing:

I had a similar issue;

But in my case the flash player was rendered but because of the combination of position:absolute and transform: translate(0,0) the mouse position was incorrect in the flash player. So although hovers were shown, the actual hit area click was the negative offset of the top and left values.

To reproduce, use the following snippet:

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

Fiddles:

Firefox bug with translate3d on a flash element

2 Answers2

With transform

Without transform