wmode transparent not working in Chrome
I usually make a quick check of websites I made some time ago to see if everything is all right. Imagine my surprise or what I personally call near death experience, when the flash website which should be gray and awesome was basically black with poorly cut out images on top. If this sounds familiar please keep reading I’ve got few ideas :-)
The horror.
My first thought was: Damn! My computer broke. Not now, damn it not now! Like there actually was a good time to have computer broken, but let’s not look in to this. So I opened my task manager, and everything looked fine. I checked other sites I made and they looked fine too.
Then I checked in IE and FF and everything was normal too, so it’s only on Chrome.
It works fine on my computer
So I did what I always do in such cases, I try it out on my developer’s computer and everything was like it should be. After all it’s my web developer’s favorite saying “It works fine on my machine!”. At this point I was willing to go back to “my computer is broken” idea.
But from what I could see my web developer didn’t install latest chrome version yet (nah nah nah) in that case is 25.0.1364.97 m so I kindly updated it. And BAM! Here it was, beautifully broken flash website. Should look like:
and looks like
Uncle Google
So I started to Google it and found out that someone had the same problem not longer than four days ago, but no answers yet. Stackoverflow on the other hand had a solution which didn’t work for me and at this point I thought it was something wrong with my swfobject… but… I noticed in the comments that changing
params.wmode=”transparent”;
to
params.wmode=”opaque”;
should help. It works on my machine, after all it’s all that matters right? ;)
The journey so far
*Update Note*
After Dipptholomew pointed it out it looks like changing transparent to opaque works when you don’t really need transparent background in your swf but all transparent pnq’s are all messed up, meaning that transparency of the png is presented as black.
In conclusion, no matter what your setup is, if you use swfobject with alt content or not. Changing “transparent” to “opaque” should solve the problem. Let me know if it worked for you in the comments :-)
*Update Note 2.0
Unfortunately no one came up with the ultimate working solution. And after this issue will be fixed by chrome (I presume it’s chrome’s fault), we need to manage somehow and better yet master it. Cause this issue come back to bite us in the … let’s call it “script” every year. Big thanks to all of you who contributed and joined this disscussion in the comments.
Here are the workarounds:
- Change “Transparency” to “Opaque” in the html if you don’t need the the transparent flash background after all.
- If you have transparent png’s in the movie clip, set the blending mode to “normal”
- If the above don’t work try this (workaround by Mansa)
Try wrapping your .png (or text) in a MovieClip and then use these settings on the MovieClip:
Display >> Blending: Normal, Render: Cache as Bitmap, Transparent
That should work with wmode :”transparent” in Chrome.