jake olsen

Thank you, you saved us much pain.

Hello, I came upon this exact problem today and was lucky enough to find that I wasn’t going crazy and that there is a real firefox/mac bug. I’m trying to impliment your code on my linked page without much success. Any ideas?

I looked at your code, Copy1 is an empty div. In your css it’s the class “copy” which has the opacity.

Also, make an opaque image in Photoshop, and set the full path where it says:

url(/path_to/opaque_grey.png)

It’s meant to be called from another function, so plop em all into one function, then throw that function into a window or body onload.

If you were just testing with Copy1, try this:

function fixMacOpacity() {
  var userAgent = navigator.userAgent.toLowerCase();
  if (userAgent.indexOf('mac') != -1 && userAgent.indexOf('firefox')!=-1) {
    var yourShade = document.getElementById("Copy1");
    yourShade.style.backgroundImage= "url(/path_to/opaque_grey.png)";
    yourShade.style.backgroundRepeat="repeat";
  }
}

Thanks Jake! Looks like everything is working now

you can make that 5 readers… thanks a lot… this works perfectly!

[...] stellt das Flash-Element so lange nicht dar, bis dieses nicht mehr sichtbar ist. Leider ist mir nur ein Javascript-basierter Workaround über den Weg gelaufen, der allerdings relativ einfach an vorhandene Webseiten angepasst werden [...]

Jake, this solution was a huge savior for us. I spent over a day thinking of workarounds, then came across this. Thanks for sharing it.

We were running into this exact bug in our site redesign. I was banging my head against the wall, but your workaround did the job perfectly. Many thanks.

Hey Jake, I am in need of your help for a clients website. Their website needs to function in a weird way using Thickbox and Flash, and I can’t seem to figure out where your code snippets need to be placed.

To view the dev site, please go here:
http://lediet.colormaria.com/exp2-062907/

Their is a home page (landing page) that when you click on the questionnaire “SUBMIT” button, a Thickbox window appears with another form. This works fine, but when you click on the second questionnaire’s “SUBMIT” button, it loads another html page inside the Thickbox window with a flash embedded through swfobject.js. This is where my problem occurs — the flash movie gets all chopped up by the main landing page’s two flash movies trying to show through the Thickbox window…

Do you have any ideas, or further instructions you could lend my way? Thank You!

Jake,

If this problem only occurs AFTER Lightbox has been used, the solution is much simpler.

You need to take the overlay out of the way after it has been used.

You can insert the following code in the end of hideLightbox function (line 269 on ver 2.0):

objOverlay.style.height = ‘0px’;

Hope this helps!

but how would you go about if you use opacity in an animated sense?

This hack is now integrated into Thickbox 3.1

If you’re using Thickbox, download: http://jquery.com/demo/thickbox/

If you’re not using Thickbox, the hack should still work.

@chris, I didn’t get a chance to look at your code in a borked state.

@alfredo, it doesn’t just occur after first use.

@sympatheticsock, re: animated opacity, if it was that important of an effect here, I would preload a sequence of transparent pngs, then set the background(s) via JS in the respective sequence.

as a web developer, was working on a problem and here are my conclusions:
on FF MAC, if a flash object(or embed) touchs an element which has
an opacity of any kind on it, the flash movie will vanish.
the wmode plays here no part, test on 2 macbooks.

just wanted to mention this for the sake of u all who ancountered this problem.

Thank you so much to vsync for mentioning the CSS opacity. I think you’ve figured out what so many of us have been puzzling over for a long time.

just wondering if you have any experience using this code to fix the issue of overlaying a div with css opacity over flash. I have tried to tweak your script with no luck. I saw the post above about the issue of flash vanishing. My flash file also disappears if it touches the div with opacity set. If you scroll down far enough for the div to be off the top of the page the flash appears.

any suggestions would be great.

@shawn, I’ve seen that problem on other sites, unfortunately that’s not the specific problem my hack solves. It may be another bug, albeit related.

Good job, Jake… good to see someone addressing this issue. Now for the pure torture part - I got the dammed thing to work (tranparency div over Flash in Firefox Mac) for ONE FREAKIN’ DAY, then SOMETHING happend and now I’ve got the same bug you address here.

Ironically, the problem appeared to coincide with other repairs we made to the site, including closing several unclosed tags, so now I’m killing myself trying to find out what we did to “unbreak” it and release the bug! We also did some massive changes to make the CSS more WC3 compliant. When everything was broken, it worked, then we fixed it, and now it’s not! And FF of course updated itself, so rolling back doesn’t work. C’est la vie!

So, to those following this bug… yes, virginia, there is a real solution… somehow… I’ll just be dammed if I know what it is. In the meantime, follow jakes advice and use transparent pngs where you can get away with it.

This fix that has been integrated with Thickbox works great.. that is until I embedd an object using swfobject. The div that swfobject overwrites seems to not be affected by the background image. Anyone know a fix for it? I’ve played with CSS and Thickbox with no luck.

Thanks for posting this! Just one thing: Sniffing the user-agent for the word ‘firefox’ leaves out other Gecko-based browsers (like Camino) that also suffer from this same problem.

Sniffing for ‘gecko’ instead might be a short-term answer (although Safari browsers also contain ‘gecko’ in the UA string).

Ciao!
a me il lightbox v2 piace molto, tanto che una volta ho dovuto farlo partire da un filmato flash…
così ho fatto un piccolo adattamento che mi permetta di avere le gallerie di immagini in lightbox (con tasti prev e next), direttamente richiamate da flash! se vi interessa dateci un’occhiata qua:
flash lightbox v2, troverete tutorial e esempio da scaricare!

Thanks, this helped me a ton.

Jake, hi, could you help with this problem please?

I discovered the bug firefox has on macs when a semi-transparent div is placed over a flash swf, but don’t know how to incorporate your solution, do you have a more throughly guided example?

this is the page I’m working on: http://www.l3hm.com/anim.php

I’d appreciate any help as my client is this close to killing me ;P

I just ran into the related bug mentioned by shawn and a few other people above, where a Flash movie would disappear when a div is faded up over it (in my case I’m using mootools to animate the opacity).

What I did to fix it was to wait until my overlying div completely faded out, and then I set the div’s display property to none. (In mootools I did this by using chain() on the opacity animation.) With the overlying div not only 0% opaque but also not displayed, the Flash movies reappeared. Hope that helps someone.

What I did to fix it was to wait until my overlying div completely faded out, and then I set the div’s display property to none.

hey - just found your solution via google - THANKS for your help and for publically posting it that hidious bug really gave me headaches

Thanks - I googled as well - you saved me several hours!

RG

thank you so much!
I’ve been looking for this simple fix for a week now!
Cheers

Ok, after 4 days and several red bull packs…

The bug prevents flash in Macs with Firefox 2 and 3 when:

any opacity element touches the flash div, could even be the document.body

in some cases when the css ‘fixed’ position is set to the flash div

Hope this save some sanity to someone, since I lost mine already….

regards

Hey guys,

I just figured out a quick work around for the lightbox/thickbox touching a flash element issue, but it is totally dependent on the nature of your flash element.

I have a flash navigation on a site that was disappearing in FF on a Mac when I opened an image in lightbox/thickbox. Since this flash element is static at the time of the overlay. I simply took a screen grab and created a background image that looked like the flash element. So it still disappears, but the user never knows.

Kinda “hacky” I know, but works with some situations.

Hi Jake,

Thank god you posted on this, I was losing my mind trying to make it work. I tried implementing your code though and it still doenst work in firefox on a mac, would you be able to help me out? My client is aching for their project to be done, if you could take a look it would really help me out of a jam.

This is where I tried to put it in-

http://techlaced.com/jones/work8

This is a previous version without the fix-

http://techlaced.com/jones/work6

Any type of help would be really appreciated. Thanks again for posting code like this,
Tamara

Thanks for the post. It came in very handy.

Thanks for sharing your code.

This problem has been fixed in Firefox 3.

How can I write some conditional code this hack is only applied to Firefox 2 (and prior versions)?

@Joe Aston, thanks for reporting it’s been fixed in Firefox 3. See above for a Firefox 2 detection script.

Thanks Jake!

It’s worth noting that this problem also occurs in Linux versions of Firefox 2.0, but perhaps it’s safe to assume Linux geeks would be using Firefox 3.0 already.

Now all I need to do is get this code working with my full-window flash background : )

For ShadowBox 1.0 there is already a fix implemented. All that’s required is to have an image called ‘overlay-85.png’ that resides in your images directory, and if the user is on FF MAC, it will use that image as the overlay.

Hi Jake -

Great post. Really helped me out. I’ve actually found so far that the PNG (created in Photoshop as a black image with that black layer set to 40% opacity (or whatever percentage you want) works in Safari, Firefox (Mac and PC) and IE 7. Since I already had a ‘fix IE’ script loading for IE 6, I just put the CSS color opacity code there and set the background image to ‘none’, overriding the PNG that works everywhere else. Then you don’t need any additional browser detection.

My circumstance is a Flash element on the page, and a semi-transparent layer over the page when the navigation is activated. In FF on the Mac, the Flash element disappeared, effectively blanking out the page. Everwhere else it was fine. I figured though that since it works well with the PNG and I already had the exception code there for other IE 6 ‘fixes’ - that was the cleanest way to go.

Thanks again!

Jason

It’s worth noting that this problem also occurs in Linux versions of Firefox 2.0, but perhaps it’s safe to assume Linux geeks would be using Firefox 3.0 already.

Thanks for the post. It came in very handy.

Hi ! I have a question, where I have to put that code? , I´m testing a website in firefox 2 for mac and flash vanish when lightbox pop up, I really don´t know what to do, heeeelp, hahahaha.
Here´s the website http://www.corporactiva.cl/fotografia/indexcopia.html

Please see in firefox2 for mac, in others browsers works perfectly, is just firefox that vanish.
Thanks

Time it took me to isolate the problem I had: 6 hours.

Time it took to Google around for people who had the same problem, once I had isolated the problem: 20 minutes.

Time it took me to implement the fix after view your page: 10 minutes.

Your karmic value for putting up this page: Priceless.

Thank you!

Great! I spent ages trying to fix that problem…until I finally found your posting. Thank you very much for posting your solution!

Great work! Thanks so much for posting this!

Hi Jake!

nice blogg/site
i have a problem can’t get the thickbox for login modal :/

[...] it yet I suggest you download it now. They also fixed a ton of bugs including the really annoying Mac flash overlay issue on transparent CSS backgrounds. Now if only FF3 was an [...]

I also found that the opacity needs to be set apart from in FF2. In other words, it can’t be set in a CSS file and then manipulated via DOM node properties for FF2.

To accomplish this, and since there are several places in the app I’m working on where different opacities are set, I split the rules out into different stylesheets: 1 main file, 1 non-ff2-mac file, and 1 ff2-mac file:

if (detectMacXFF2()) {
// attach the Firefox 2 Mac stylesheet
var CSSFile = ‘ff2_mac.css’;
} else {
// attach the one for everyone else
var CSSFile = ‘non_ff2_mac.css’;
}

var cssNode = document.createElement(’link’);
cssNode.type = ‘text/css’;
cssNode.rel = ’stylesheet’;
cssNode.href = base_url + ‘/stylesheets/’ + CSSFile;
document.getElementsByTagName(”head”)[0].appendChild(cssNode);

This, along with the detectMacXFF2() function definition are wrapped in a small js file. Looking forward to the day when FF2 is obsolete (probably about the time we can all bury our hacks for IE 6), it’ll be a lot easier to clean the code back up.

Thanks much for the tip; saved much time!!!!

Hi, your code seems incorrect, and is detecting FF3 and Safari on a mac.

Heres a fix:


function detectMacXFF2() {
var userAgent = navigator.userAgent.toLowerCase();
if (/firefox[\/\s](\d+\.\d+)/.test(userAgent)) {
var ffversion = new Number(RegExp.$1);
if (ffversion < 3 && userAgent.indexOf(’mac’) != -1) {
return true;
}
else
return false;
}
else
return false;
}


Notice the addition of return false following the conditional.

Thanks for this great function, saved me a lot of time figuring it out on scratch. Had the same weird bug with opacity on top of flash.

Again, with indented code


function detectMacXFF2() {
var userAgent = navigator.userAgent.toLowerCase();
if (/firefox[\/\s](\d+\.\d+)/.test(userAgent)) {
var ffversion = new Number(RegExp.$1);
if (ffversion < 3 && userAgent.indexOf(’mac’) != -1) {
return true;
}
else
return false;
}
else
return false;
}


haha indents didnt work… sorry for triple comment!

I have run into the same issue, and could not test for it, because I do not have a MAC.

But the bug was reported to me, by a few people using my code.

In my case, I can not use any sort of scripting, to test for platform.
I am limited to css. (myspace)

Because I had a similar issue in the PC version of Safari, which I was testing for, I resorted to -moz-opacity (using an alpha filter for IE) so that the functionality was completely disabled in all but Mozilla (including FireFox) and IE.
No effect, was preferable to the bug.

Is there a solution, using css only, that will make the opacity work on the PC version of FireFox and NOT do anything on the MAC version of FireFox?

I am playing with some pseudo classes, to see if any are recognized on one platform and not the other.
(This is how I often do browser specific css coding), but I am not finding anything that works here.

Please help me… I tried implementing the hack, but no luck… anyone has any ideas why it’s not working on my site (ditzah.com)?

Thanks a lot.

I use Allwebmenus and when I try to use the thickbox, the menu is on top of the photo. What do I do to correct this?

http://www.americanamedia.com/test/holder/photos/photos_new.htm