Have you ever run your swf in other wmode than window? If so, you might have experienced the same troubles as we did in our Virtual elections Facebook application. All the problems arose from the seemingly unimportant decision – as we needed to pop up Facebook dialogs (such as Invite Friends or Publish to Wall) over the Flash movie, we decided to switch the swf’s wmode parameter to opaque. While testing the application, we then came across the following two (and pretty annoying) bugs:

Corrupted local characters in text inputs

This an old and well known bug. In the demo above, try to type a Czech word “žluťoučký” (you need a Czech keyboard for it). What you get (or at least what I get) is “~lueouký” in Firefox 3.5 / IE 8 and žlu´toučký” in Chrome 3 / Safari 4 / Opera 10 (I’m testing on Windows XP). There are several workarounds for this bug:

• swfInputs displays an overlaying HTML input field above the Flash text field and passes the captured key strokes to the Flash movie via JavaScript.
• JSTextReader is another JavaScript-based solution – the difference is that JavaScript is only used for listening to the keystroke events and transferring the correct chars into Flash (i.e. no overlaying HTML input filed is used).
• Nicolas Cynober’s workaround is in my opinion the most decent one. It’s almost a pure ActionScript solution – the keystrokes are captured directly on the Flex TextInput / TextArea components through the TextEvent.TEXT_INPUT event. Using the event.preventDefault()method, the event handler “swallows” the corrupted characters and replaces them by the correct ones. Of course, for this solution to work, you have to provide it with a class that maps the wrong characters (or their codes) to the right ones. JavaScritpt is in this case only used to detect client’s browser.

For our purposes, the last mentioned approach was the most suitable, although not perfect (some characters may still be corrupted based on browser and platform). I had to create the Czech keyboard mapping and it was a tricky task because unlike other languages, the Czech keyboard does not work even in MSIE. So I’ve written two mapping classes: PTCzechKeyboard_MSIE_Firefox (supports MSIE + FIrefox) and PTCzechKeyboard (supports all other browsers). You can check the result here (feel free to use the source code attached to the demo):

Mouse wheel not working (Firefox / Chrome / Safari / Opera)

Maybe not that critical as the text inputs bug but still quite unpleasant, as it significantly reduces usability of Flash applications. In the opaque / transparent wmode movies, the MouseEvent.MOUSE_WHEEL event not dispatched (except for Internet Explorer). As the result, all the scroll bars can only be controlled by dragging the thumb or pressing the arrow buttons, which is not really comfortable. Although there is a workaround available for this bug too, in our Virtual elections project we decided to ignore this issue because of the budget constraints.

Let’s hope Adobe is going to address both bugs in the future Flash Player releases. In the days of hybrid AJAX – Flash applications, using opaque or transparent wmode becomes a necessity, so if you find the described bugs as serious as we do, please vote for them (FP-501 and FP-289) in the Adobe Bug System.