19

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" (e.g. 20.5px). Once we fixed that everything worked fine.

6 Answers 6

16

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);
}
4
  • This took me months to figure out... everything uses margin auto
    – Chad
    Commented Mar 27, 2011 at 23:24
  • Spent days to resolve this issue and finally found this solution... :)
    – User 99x
    Commented May 6, 2014 at 5:38
  • This also happens for me on OSX Safari 8.0.3, Flash 16.0.0.305
    – d2vid
    Commented Mar 8, 2015 at 18:19
  • The script doesn't fix the bad feature for me (firefox 37.0.1, Shockwave Flash 11.2 r2 02).
    – sergzach
    Commented Apr 17, 2015 at 18:12
7

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

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.

0
0

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.

0

Check also you don't have any parent div (or the div itself) with a CSS transform rule, eg.:

transform: translateX(-50%);
-3

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

1
  • 4
    That's some decent trolling... !
    – nirazul
    Commented Nov 17, 2012 at 17:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.