Firefox and Flash SWF selection and focus problems

Posted by Luke Bayes Sat, 18 Nov 2006 01:02:00 GMT

Ali and I have been providing support for the past couple of months on a large application that we built and deployed earlier this year. We had an interesting bug filed today and I set about trying to address it.

The bug is this:

If I click around in the SWF application, and especially if I select a text input field at some point, I can no longer edit the Firefox Location bar (Address bar).

In addressing this issue, I immediately suspected our focus/selection management layer, then moved on to our TextInput controls, and eventually wound up scouring the web to see if anyone else reported the same problem. As it turned out, I still haven't found anyone else reporting this issue, but in my searching - I did discover the root cause.

It's the "wmode" parameter of the embed tag. As far as I can tell, this attribute can be set to "opaque", "transparent" or not set at all. Setting it with an empty value, or an unexpected one appears to default to the opaque behavior. NOT declaring it at all behaves very differently as I soon discovered...

I was surprised to find an issue with this setting because we're using the swfObject deployment package and it came highly recommended. As it turned out, there doesn't seem to be much the swfObject folks could have done, and by not declaring this property at all, they in fact chose the least of 3 evils...

After finding out about this attribute, I immediately set it to "opaque" in my embed tag and found that my bug disappeared. I was so excited I started integrating and was just about to check in to version control, when it occurred to me that this setting might actually have side-effects beyond the background opacity... As a last minute double-check, I began searching google for the meaning of this parameter and quickly learned that this seemingly innocuous little attribute was sitting on top of a giant mountain of subtle bugs...

Following are the side-effects that I discovered:

*NOTE: All of these behaviors are Firefox-related, and I'm only editing the embed tag, so IE users probably won't get much benefit from this page.

Flash Movies:

wmode null (no attribute declared): clicking around in this movie will disallow direct selection/editing in the location bar.
In fact, the location bar will allow you to select it, but input focus will not leave the swf if the next-selected item is the location bar. Oddly, you *can* select the Firefox search input, and *then* the location bar!

wmode="opaque": Clicking in this movie will appropriately allow you to select and edit the location bar.
Unfortunately, setting this property has the following problems:

• I-Beam does not show up in editable text fields
• ScrollWheel doesn't seem to work at all. (Others reported that: OnMouseWheel events return ScrollTarget ~50-60 pixels away from the mouse, but I can't get the swf to even capture scroll wheel events...)

wmode="transparent": This setting *does* allow us to select the location bar, but after quite a bit of searching, it seems that setting wmode to transparent creates a whole host of problems in firefox, Following are some of what others found:

• Key.isDown() returns false every time
• I-Beam does not show up in editable text fields
• ScrollWheel doesn't seem to work at all. (Others reported that: OnMouseWheel events return ScrollTarget ~50-60 pixels away from the mouse, but I can't get the swf to even capture scroll wheel events...)
• Non-US keyboard layouts revert to US key codes
• Reported degradation in performance

In closing, I sure hope someone is able to address these issues.
I'm planning on doing some more research over the weekend and hopefully reporting the bug to Firefox and/or Adobe. I suspect that some of these issues fall into each camp...
It just makes me sad to lose a day of productivity chasing such strange integration bugs that seemingly should have been found before one or another of these products were released...

Resources:
Following are some links to what other folks had to say on some of these issues:

• Source Files
• Keyboard Mapping Issues
• Key Handler Failures
• Key.isDown()
• MouseWheel problems
• Performance Differences?
• Hit Location

[Update 11/20/2006]

I just verified that this issue can be reproduced in the Adobe Exchange using Firefox 2.0, but *not* using Firefox 1.5.0.8. The problem does reproduce here using both versions of Firefox. I'm intensely curious about how Adobe is embedding that swf, but can't easily get at the page source thanks to iframes and linked js files... Is anyone else seeing the same problem?