无法点击Firefox上的flash中的允许按钮

Question

I have a webapp embedding some flash content in an iframe. The flash part is requesting access to the webcam. On firefox/mac os, user's can't click the allow button. This only happens when the page embedding the swf file is loaded in the iframe, it works fine when laded separately. Has anyone else faced a similar problem? Do you know any workarounds?

EDIT: For future reference: we were positioning some stuff via JS and we had positions using "half pixels" (eg 20.5px). Once we fixed that everything worked fine.

Answer 1

I found that this bug will also exist in situations when you use margin auto in CSS.

For example, in a fixed width & center aligned layout its typical to use "margin: 0px auto;" to keep a content well centered. This seems to produce possible (likely) decimal left/right margins for the content well. That isn't really a problem for Firefox.. it handles decimal pixel offsets just fine.

But Flash widgets totally seem to freak out when their object container are positioned with decimal pixel values. At minimum, you cannot interact with the "Allow" button. To me, this seems to be the root cause of this bug you will see widely reported by many (as it pertains to FF atleast).

As for why it only occurs in FF, I'm not entirely sure. On my OSX machine, Safari and Chrome don't exhibit this behavior with flash objects. Perhaps all DOM elements in Webkit are rendered with rounded pixel offset values automatically?

For Firefox, I implemented this workaround (useful for center aligned designs):

$(document).ready( function() {
  repositionContentContainer();
});

function repositionContentContainer() {
  // this routine is a complete hack to work around the flash "Allow" button bug
  if ( $("#content").length > 0 ) {

    //Adjust the #content left-margin, since by default it likely isn't an int
    setLeftMargin();
    //If the User resizes the window, adjust the #content left-margin
    $(window).bind("resize", function() { setLeftMargin(); });
  }
}

function setLeftMargin() {
  var newWindowWidth = $(window).width();
  var mainWellWidth = $("#content").width();
  // create an integer based left_offset number
  var left_offset = parseInt((newWindowWidth - mainWellWidth)/2.0);
  if (left_offset < 0) { left_offset = 0; }
  $("#content").css("margin-left", left_offset);
}

Answer 2

Setting the wmode to ' direct ' fixed this.
No need to set 'margin' / 'position' values as integers.

Note that 'direct' wmode is available since Flash 10 and doesn't work under IE

Answer 3

This issue is being tracked at the Adobe bug database:

http://bugs.adobe.com/jira/browse/FP-4656

The basic issue is that Firefox uses half-pixel positioning, and adobe uses it irregularly after resizing. This comes about through centered swfs on a page, or is made even worse if the swf is inside a centered iframe, such as most facebook apps.

There is a solution matrix posted there that covers browser zooming, resizing, and other complications.

Answer 4

I know this is an old question but I've just discovered another issue that was causing the same bug, and this is the top Google result so I'm adding this answer.

A CSS3 gradient on your page background (possibly on container div backgrounds as well) will also cause this issue. Remove the gradient and the button is clickable again.

Answer 5

检查你没有任何父div（或div本身）与CSS转换规则，例如：

transform: translateX(-50%);

Answer 6

I was able to make it work. Ahuh!

Use Tab button until it highlights the whole Flash Player settings box, then press Tab button again until it highlights the "question mark" button on the right upper part of the box. Press Space bar or Enter button repeatedly until it opens another tab on your browser. Now go back from the previous page where the Flash Player settings is, press Tab button again until it highlights the "Allow button" or "Deny button" depending on what will you do. Press Space bar or Enter button and voila! There you go!

Hope it helps. Have a pleasant evening everyone! :)