Wednesday, November 25, 2009

Firefox - Dynamically loaded IFRAME breaks page styling

We had a button on page, which provided possibility to load IFRAME dynamically with help of JavaScript functions. It was working ok in IE, but in Firefox for 3.0.15 version and some specific machines were problems. First of text labels for all buttons were shifted, table styling was broken, text was shifted too. Even page itself was looking zoomed out, because one additional horizontal scrolling bar appeared.

After making Zoom In and Zoom Out, everything was looking ok. First of all I tried to uninstall all plugins from Firefox and clear all private data. But it didn't help.

After that when page was loaded again and issue happened, I pressed Ctrl + 0 (Zero) combination to reset text to normal size. Issue was fixed and didn't happen again after reloading page and restarting Firefox.

RoboHelp - Flash content isn't rendered under Mac OS

This bug was really interesting, but I've spent some time to fix it.

There was a generated help by Adobe RoboHelp 7.0.3 version. Everything was working fine under Windows OS, but not under Mac OS. Flash part of it wasn't rendered at all (it was rendering approximately one time per 50-70 launches).

It was pretty confusing, so I started analyzing JavaScript files generated by RoboHelp. I found out that JavaScript functions, which had to be called when Flash objects are loaded, aren't called at all. So I decided to investigate way of communication between Flash and JS in RoboHelp.

After decompiling .swf files of RoboHelp I saw that JavaScript is called from Flash with help of instances of LocalConnection class. So I started looking for known issues in Flash for this class under Mac OS and found this post - http://forums.adobe.com/thread/495868.

So it's became clear that newest version of Flash player should be installed - 10.1 http://labs.adobe.com/downloads/flashplayer10.html.

Flash content isn't clickable over table in Firefox

This issue was related to the Flash object, which was placed on the top of page. After clicking on menu button, new options were expanded and rendered over table. But these new buttons weren't clickable in Firefox.

After looking for known issues in Firefox, I've found solution. Main cause of it was that table, over which expanded Flash content was rendered, had "overflow" attribute set to "auto" value. But if change it to "hidden", everything will be ok.

So I've added small JavaScript function, which is called when Flash menu is expanded and changes "overflow" table attribute to "hidden". After Flash menu is collapsed, same JavaScript sets "auto" value back for table.