There isn't much information out there about this Flash redraw bug in Firefox 3 on the Mac, so I have written this blog post. Hopefully, the player team can fix it soon.

There are a lot of people complaining about this issue on various forums, but nobody seems to have isolated it. I have figured out a way and here is what I have discovered.

The Bug

The bug happens in Firefox 3 on the Mac. Occasionally, you will see nasty visual artifacts appear on the screen. Most often, they're boxes and lines. Sometimes they're black, or white, or grey. Transparent PNGs on the screen are often victims where their entire bounding box flashes a solid color for a moment.

Any Javascript call made by Flash causes Flash to screw up its redraw, resulting in boxes and lines appearing on the screen. Again, transparent PNGs are the most common way to see this, but there are other ways (shown below). The color of the boxes and visual artifacts is generally whatever the color of the html page is behind the Flash.

The reason this happens with SWFAddress

A lot of people attribute this bug to SWFAddress, but the issue is not SWFAddress, SWFAddress merely exposes the bug.

If you click a button that calls a method in SWFAddress to change the address bar, SWFAddress is calling a Javascript method via ExternalInterface named setValue(). SWFAddress.js then calls back into Flash. So, if you set up a listener to SWFAddress and handle navigation in that function, you will see the redraw error when you trigger the event from Flash, but NOT when you trigger the event from the browser's back/forward buttons.

This is the important distinction. When you click in Flash, Flash is calling a Javascript method, which then calls an Actionscript method. When you click the browser's back and forward buttons, Javascript is calling that method in Flash without Flash calling Javascript first. This is why you don't see the boxes unless you trigger the navigation from Flash.

The Proof

I have created the following simple example to show this bug in action. This is a swf that is 2500 pixels tall. The swf is basically empty.

http://www.stevensacks.net/flashbugs/ffosx

When you click the button labeled "Scroll With Flash", it scrolls the window back to the top by calling a Javascript method setScroll() inside a TweenLite script. Here's the Actionscript source. As you can see, Flash is calling Javascript over and over again in the TweenLite call to set the scroll position of the browser window. This causes the redraw bug to happen across the entire swf. Really nasty.

Below the swf is a link in HTML that scrolls to the top using a Javascript interval. Flash is not calling Javascript here, Javascript is just setting the scroll itself. You can see the Javascript method by viewing the HTML source. As you can see, there is no redraw bug when you use the Javascript scroll.

If you view this page in any other browser besides Firefox 3 on the Mac, you won't see any issue with the Flash scrolling.

That's all there is to it. Here is the source to this experiment.

Real World Examples

For more examples of this bug in action, check out these sites in Firefox 3 on the Mac (and then in any other browser):

http://www.saatchila.com/
Once the site loads, click on any of the characters on the corners. You'll see big boxes appear. Click on the swinging Back button on top to go back. Notice if you use the browser next/back buttons once you build some history, you won't see the artifacts.

http://www.dermalogica.com/us/products.html#/products
Click on the middle nav options as quickly as you can. You will see white boxes appear here and there. Then, spam the browser's back/next buttons and you won't.

http://www.hiptobesquared.com
This site uses PV3D and you can see when you click on the various boxes, brown lines appear around the edge of the PV3D area and as you mouse over the artifacts, they disappear. Again, if you use the back/forward buttons on the browser, no artifacts are drawn.

These are just a few sites that have this issue. Any Flash site that uses SWFAddress will exhibit these problems, but, again, it's not SWFAddress's fault, it's Flash calling Javascript.

Update Jan 12, 2009
Rostislav Hristov, author of SWFAddress, informed me that the latest version of SWFAddress (2.3), when running in Firefox 3 on the Mac, has a short delay before calling back to Actionscript in order to mitigate this issue. I tested it and so far it looks like it works. Update your SWFAddress to 2.3 and see if it helps.

 

30 Responses to Firefox 3 Mac Flash Bug Boxes Visual Artifacts

  1. I get this bug a lot, its a bummer and really makes me avoid firefox on mac.

    We recently launched http://www.watchblu.com for blu ray and the effect is really jarring when switching between sections within the site.

  2. Kristofer Joseph says:

    You get my Flash Master of the month award for this one. It's awesome that you actually took the time to track this down for the community. I've been told more than once "Can you fix that bug in your code that makes the page look funny". I was pretty sure it had to do with javascript ( Actionscripts hacky brother ) since it started showing up only when I was running Thunderbolt in firebug. Awesome work.

  3. Josh Tynjala says:

    I've seen this one a few times with the TabNavigator container in Flex. Since it uses Flex's history manager, it makes sense that the JavaScript communication is the culprit. Hopefully, this one will get fixed soon because it looks pretty bad to the user.

  4. Lee Brimelow says:

    Thanks Steve. I'm passing this to the player team right now. Could you also log a bug for it if you haven't already at https://bugs.adobe.com/flashplayer/.

    Lee Brimelow
    Adobe

  5. Larry Lague says:

    Steve, if you log the bug on the Adobe site, could you post a link to it so others can vote for it? I've had trouble with this bug for months and couldn't isolate it.

  6. Use windows. Fixed w00t.

    No really, I have seen this on max actually, real pain in the neck.

  7. Jason Fistner says:

    Thanks for posting this. I can't believe this hasn't been fixed yet.

  8. Sean Udy says:

    I have had this problem too. I called apple and the mac genius told me to set up a new user profile on my computer and delete the old one. When I did this, it fixed the problem. However, two weeks later, the redraw problem came back. It's really a distracting pain in the arse. I have almost given-up and decided to go back to Safari.

  9. Sean Udy says:

    correction… it happens on Safari too. Must be some plug-in or something.

  10. [...] 3 also features the brand new version of SWFAddress 2.3, which helps mitigate the Firefox 3 OSX redraw bug (thanks Rostislav!), as well as the latest TweenMax [...]

  11. Phil Crosby says:

    Brilliant test case. Thanks for tracking it down!

  12. Debbie says:

    Oddly enough I found your site after banging my head on a wall because a flash file I created is showing an artifact in both IE and Firefox on pcs. Never saw this before – it is driving me crazy!

  13. kat says:

    this just started happening to me today, is there a fix for the bug?

  14. Erin says:

    This problem is driving me CRAZY!

    It's been happening for months, on all browsers on my Macbook (Opera, Camino, Firefox & Safari)

    It's particularly bad in Google Reader.

    I've also noticed that this happens in iPhoto when scrolling.

    My Mac actually went back to be serviced, as we thought it might be the video card, since it was happening in iPhoto too. They replaced both the motherboard and display.

    Interestingly, I can't reproduce the problem on my Mac Pro desktop machine.

  15. Tahi says:

    I can´t beleive i finally found some reference about this!!.
    Thank you so much. I feel less alone in this world…
    It´s one of the weirdest, harder-to-track bugs i´ve ever encountered.

  16. Espy says:

    This drove me nuts for a while as well. Very obscure. But now I have a site which relies very short intervals between SWFAddress.setValue() calls, and because of the delay introduced by the fix, the wohle thing doesn't work on Macs. Maddening.

    In other words: out of the frying pan, into the fire.

  17. AudioVoyeur says:

    Glad to know that the problem might a little wider than my on abilities as noob ActionScripter – had visions of myself becoming a gardener or something..

    I have the same Problem on:
    Macbook Pro 2.5 (os x 10.5.6)
    FIREFOX 3.0.8
    and a Testing P4 (WinXP; IE6/7)

  18. JJ Borja says:

    For anyone that is interested, asual has fixed the problem for swfaddress, so anyone with deep linking setup, get the update.

  19. Tahi says:

    Espy, same problem here… Visual artifacts are gone but now the whole thing is falling apart due to the interval. Very frustrating.
    Not very professional, but I wish I didn´t have Firefox 3 on Mac. I would have lived happily in ignorance.

  20. ickydime says:

    Life saver man. Thanks for the detailed report as well as the update for the solution!

  21. PolishRen says:

    I'm having the bug with all browsers on PC and no JS. Visually its the same bug and it does affect my png's but it seems to be a redraw problem with multiple png's overlapping.

  22. Jeff Karova says:

    I believe that the ExternalInterface call in or out blocks execution of swf player rendering. When the 'flash' happens on our site, it's always the background color of the swf – leading me to think that the player has cleared the rendering buffer in prep to redraw, then gets hung by the call. We've also noticed the redraw only happens on the redraw regions. Putting in the delay allows the redraw to happen before rendering get blocked.

  23. Ryan Ore says:

    I've been struggling for a while with this one. I came across a solution when working with swfaddress 2.1

    * SWFAddress.js::Search for this…

    this.setValue=function

    * replace that with this…

    this.setValue=function(7e){
    if(21.isFirefox()){ setTimeout(”SWFAddress.setValueWithDelay(’”+7e+”‘);”,500);
    }else{ SWFAddress.setValueWithDelay(7e)}};
    this.setValueWithDelay=function

    * save that file and YOU ARE DONE
    *other versions need refactoring.

  24. Thanks for the information. Have been using stateManager but will have a look at the latest version of swfaddress if that will resolve it.

  25. Eric says:

    Firefox 3.5.6 was released today, and it seems to fix this bug. Ironic, as I came across you blog post today as I needed to fix the problem on a site I'm working on, and once I implemented a fix 3.5.6 was released. But thanks for the info, it was super helpful.

  26. Eric says:

    Opps, I meant version 3.6

  27. Martin says:

    If it's your own JavaScript function that you are calling, this fixes it.

    function calledFunction() {
    setTimeout('delayedFunction()', 0);
    }

    I was surprised that a delay of 0 works, but it does.

Leave a Reply

Set your Twitter account name in your settings to use the TwitterBar Section.