CSS Opacity and Flash Problems in Mac Firefox 2
I recently ran into an issue with the Lightbox2 module which kept me puzzled for quite some time. The problem was that when trying to view a Flash video in a lightbox on Firefox 2 on a Mac, the picture would never appear, though I could hear the sound okay. However, everything worked perfectly in Firefox 3 on the Mac, and in both Firefox 2 and 3 on Windows and Ubuntu! Lightbox2 also worked fine when displaying other content types (e.g. images) on the Mac, it was just Flash videos that were affected.
After a bit of messing around with the code, I eventually narrowed it down to a conflict between the lightbox overlay background and the flash object. If I removed the overlay, then the video would display, as soon as I put it back everything stopped working again. Initially I thought it was a problem with the z-index settings and tried tweaking that to no avail. Eventually, I figured out that removing just the overlay opacity attribute fixed the issue.
However, removing the overlay opacity or transparency wasn't something I wanted to do, certainly not for all browsers and platforms, so I wrote the following javascript function to detect Mac Firefox 2 browsers. It may be of benefit to some of you who have encountered the same problem.
function detectMacFirefox2 {
var ua = navigator.userAgent.toLowerCase();
if (/firefox[\/\s](\d+\.\d+)/.test(ua)) {
var firefox_version = new Number(RegExp.$1);
if (firefox_version < 3 && ua.indexOf('mac') != -1) {
return true;
}
}
return false;
}Using this function I was able to detect Mac Firefox 2 browsers, and in such cases Lightbox2 now removes the opacity attribute from the overlay, thereby making it opaque. However, I went one step further and it now only removes the opacity attribute if a video is being viewed. If any other content is being displayed in the lightbox, and for all other browsers and platforms, the opacity setting is kept and everything works as expected.
I hope this article helps some of you who have encountered the same problem.
[Update: since writing this article, I found a similar one posted in Jake Olsen's blog. It's interesting to note his solution is almost identical to mine!]
Hi Stella,
First of all, thanks for your contribution...
I'm actually trying to use LightBox and I noticed it doesn't work in FF mac. Googled and I found your post... but... I don't know how to use your function...
Where should I include it? How and where should I call it?
Please, help me!
Thanks a lot
Gabriela
Is this the Drupal Lightbox2 module you're using? Or are you using Lightbox2 from huddletogether.com or some other source?
Hello again
I'm using this one: http://www.dynamicdrive.com/dynamicindex4/lightbox2/index.htm
Thanks for your answer!
That is the original Lightbox2 script by huddletogether.com. However, it doesn't support display of Flash videos in the lightbox which is what this post is about. I think you have a different issue I'm afraid.