Chrome Flash player creates transparent rectangles

Question

I'm encountering a weird, very difficult to reproduce graphics glitch in a Flash video player!, so far only in Chrome.

The gray rectangle below "Enter the building" is showing the background color of the html div that the flash player is sitting in. There is a smaller one under the "Where are we" link. These are sprites (containing several other sprites and displayobjects) that have a scripted hover animation (they slowly move towards a random point that is withing a certain range of their origin). The glitch resizes together with them, sometimes disappearing.

What's the strangest it makes the entire flash component see through. I have this code running when the videoplayer is created:

        graphics.clear();
        graphics.beginFill(0xff00ff, 1);
        graphics.drawRect(0, 0, _stage.stageWidth, _stage.stageHeight);
        graphics.endFill();

So there should be a bright color in the back of the video player, and I've confirmed that it is there if I don't load the video player. However this bright color is not displayed, but rather the background div that contains the player shines through.

This makes absolutely no sense to me...and I have no idea how to debug this. All I know is that the appearance of the glitch is dependent on where the text-links are hovering on the screen.

The flash is loaded in WMODE transparent, which we need because it has a expandable 'wing' on the side which is semi transparent.

EDIT:

it is live at www.48hourgames.com. Once you make an account you will see the video player that ends with the screenshot above.

Answer 1

I've encountered this issue today on my Google Chrome 31.0.1650.63 while playing my jigsaw game. I don't normally use this browser, hence flash supposed to work exactly the same in every browser, so I was a bit surprised to hear about white rectangles overlaying all over my game. Setting the wmode to opaque instead of transparent fixed this problem.

Answer 2

I got this problem today with lastest Flash Player version 11.6 + Chrome 27. In some computer it's working, on several others, it's not, this make it's very difficult to track down the problem because it's not happening my side.

I believe that this is a Flash's bug, not chrome because when I rightclick -> zoom-in, rightclick -> zoom-out the dirty patches disappear

So I looked around for a dirty quick fix.

Tried cacheAsBitmap method : does not work (this fix does work for "black where transparency" problem but not for this one).

Tried the two frame images method : does not work neither (not sure why)

I finally found a way to fix (tested several times) :

As the dirty white patches only show up when the animation end I put a transparent shape tween clip on stage and let it run forever. And it works.

p/s : Actually I tried to add this as a comment instead of an answer but can not found a way to do, it's weird.

Answer 3

same here, in my videoplayer too.

only in chrome pepper flash, and only when the swf is embeded with transparent wmode.

Today i've found a fix/workaround/hack on the web which one i can live with:

"If you'd like to bypass this problem with a simple hack, you can draw a MovieClip that is a transparent fill. And every frame toggle its 'alpha' property. Because its fill is transparent, its 'alpha' property doesn't do anything, except for force a full screen redraw to update the alpha property of the MovieClip. This in turn fixes any malfunctioning rendering due to wmode being transparent.

By adding moueEnabled = false you ensure the hack doesn't interfere with any existing mouse events"

import flash.display.MovieClip;
import flash.events.Event;

var redrawAll = new MovieClip();
redrawAll.mouseEnabled = false;
redrawAll.graphics.beginFill(0x000000, 0);
redrawAll.graphics.moveTo(0,0);
redrawAll.graphics.lineTo(stage.stageWidth, 0);
redrawAll.graphics.lineTo(stage.stageWidth, stage.stageHeight);
redrawAll.graphics.lineTo(0, stage.stageHeight);
redrawAll.graphics.endFill();
addChild(redrawAll);

addEventListener(Event.ENTER_FRAME, function(e:Event){
    redrawAll.alpha = (redrawAll.alpha == 0)? 1 : 0;                 
});

"

source: https://code.google.com/p/chromium/issues/detail?id=173089#c12

Answer 4

This is a problem with the Pepper Flash player. Adobe and Google have been working on this for some time, it is how they intend to keep Flash alive and working on the Linux platform.

Pepper Flash, unfortunately, is very buggy. Sometime over the summer of this year, Pepper Flash became the default Flash plugin in Chrome for all operating systems. It has many issues that there are no real solutions to, other than disabling it (and hoping Adobe/Google will address them).

To disable Pepper Flash:

• go to: chrome://plugins
• click the Details icon in the upper right
• find the Flash Player plugin section, you will likely have several versions of Flash installed here. I just installed Chrome to verify it was the problem, and had Pepper Flash plus 2 "normal" versions of Flash.
• disable the Flash plugin that has "PepperFlash" in the path.

Answer 5

I was able to very reliably reproduce the issue. A couple of ideas:

• Sounds like wmode transparent might be problematic on a recurring basis. Maybe you could make the Flash element have width 100% and do a seemless background in the left / right margins. In Flash, you can prevent it from scaling your content via stage.scaleMode = StageScaleMode.NO_SCALE;. If the Flash went the whole width, you could get rid of the wmode transparent and might be good to go.
• Have you tried setting cacheAsBitmap to true for your two buttons that overlay the movie?
• Because the artifacts only show up at the end of the movie, when it's a still frame, maybe setting cacheAsBitmap to true on the movie when it reaches this final state would work?
• Maybe swap out the movie when it reaches the final state with a PNG image that looks the same?
• Maybe swap out the two buttons with PNG images, if they are not already PNG images?

If these don't work... getting more desperate.

• Maybe strip the side menu (expanding Flash element) out of the SWF into it's own SWF and put on top of the movie SWF. This way, the movie SWF can lose wmode transparent and maybe the glitch won't happen on the side menu.
• The side menu could be HTML.
  • The rollover states could be HTML elements.
  • Or, the side menu could call into the Flash element to toggle the rollover texts. The call into Flash would have to be registered via the ExternalInterface class (details).

As I don't have code to test anything, these are all kinda shots in the dark.

I would start with the cacheAsBitmap related ideas. Then move onto the PNG ideas (buttons, last frame). From there, try the full-width version of the Flash element. If these don't work, you might want to consider a new design. If that is not an option, I would move onto splitting out the side menu, with variations, as described above.