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

I’m having also problems with box and flash. However I’m using PC & FF3. What ever I do, the flash content of the page is going on the thickbox. Visit the link and test how it is not working.

I’ve tried to use z-index settings and transparency settings for flash params, but nothing seems to have effect.

Can anyone help me? Does code that is given on this blog help me and where should I put it?

Thanks, and please help a noob here..

Hi everyone,

I’m having the same problems as you guys, but my workaround doesn’t seem to work yet…
I want to replace the .swf for a .gif or .jpg if someone uses FF2 or FF3 on a Mac.
In FF2 the swf dissapears entirely, and in FF3 the div starts to flickr when hovering over the menu-items.
I’m not really a Javascript expert so I don’t know exactly how to achive this.
This is my javascript so far thanks to this post:

function detectMacXFF2() {
var userAgent = navigator.userAgent.toLowerCase();
if (userAgent.indexOf(’mac’) != -1 && userAgent.indexOf(’firefox’)!=-1) {
middle.write(”swf/welcome.gif”);
} else
var so = new SWFObject(”swf/welcome.swf”, “Flash”, “960″, “580″, “6″, “transparant”);
so.addParam(”scale”, “noscale”);
so.addParam(”allowScriptAccess”, “SameDomain”);
so.addParam(”quality”, “high”);
so.addParam(”wmode”,”transparent”);
so.write(”middle”);

With this javascript the .swf dissapears in every browser.
Maybe someone can take a look?

Thanks!

Yes, thank you! Very odd problem, but getting rid of transparency worked for me!

Is there any css hack available for MAC Firefox… If so can u please assit me

if you can’t use javascript (in other words css only solution) then just use the png solution in your css – then you will have to detect ie 6 (possibly using proprietory conditionals) to use the filter but otherwise it will work properly in all browsers

Jake, I’ve been trying to use your “hack” and it’s not working. I’m using milkbox and mootools framework for my lightbox, and the swfs don’t show up in FF2.

I created a js file called fix-ff2.js, which I loaded after all the other js files in the head of my index page.

the script contains this code:
//script to detect ff2 and fix rendering problem with swfs in lightbox

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;
}
}
}

var yourShade = document.getElementById(’mbOverlay’);
var d = detectMacXFF(); //note new detectMacXFF2 script above
if (d) {
//osx ff css opacity + flash wmode transparent doesn’t work
mbOverlay.style.backgroundImage= “url(../img/opaque-grey.png)”;
mbOverlay.style.backgroundRepeat=”repeat”;
} else {
mbOverlay.style.backgroundColor = “#666″;
mbOverlay.style.MozOpacity = .70;
mbOverlay.style.opacity = .70;
mbOverlay.style.filter = “alpha(opacity=70)”;
}

I really don’t understand js much, I am a designer. I looked at the code for Milkbox and it seems like mbOverlay is the element that has the transparency, so that’s what I put in for getElementByID, and the png I created is one directory up from the js file.

Can you help? I really can’t expect everyone coming to my portfolio to have FF3.

thanks in advance!!!!!

Chris

I have a question about Opacity with nesting. I have an image that I am loading into a td tag. In the child ttable td tags, each td needs to have its opacity set to show the image ‘faintly’ except in one particular td, where I want to show the image clearly.
I have this part working, but I also have the need to nest a table inside one of the td cells where the background image does not bleed through at all. Currently the image continues to bleed through.

This is what I am using for the first nested table’s cells:
#maintable td.nowindow {
background: #ffffff;
opacity:.80;filter: alpha(opacity=80); -moz-opacity: 0.80;-khtml-opacity: 0.80;
}
#maintable td.windowview {
background: #ffffff;
opacity:.01;filter: alpha(opacity=1); -moz-opacity: 0.01;-khtml-opacity: 0.01;
}
What can I use in the 2nd nested td’s cells to not allow the image to bleed through?

I found out a way to float an non-transparent block area over an area that is transparent.

The block area needs to be rendered by the browser into an area that doesn’t have the transparency (opacity) in use, then you can move the block via positioning (position: absolute or relative) to where you want it on the page.

Hope this will help others.

William

[...] …should web developers / designers care about browser bugs like the opacity issue in firefox mac? [...]

SO, I’m obviously late to the conversation…
I’m having the same trouble with Shadowbox / SWF / Firefox…

I’m using Firefox 3 on a mac and I’m having problems with the swf elements disappearing after the shadowbox is engaged. I’m not much of a programmer, but I can improvise with code relatively well.
I tried using the code provided by Jake (thanks!) but it had no effect on anything…
Are there any special instructions for ShadowBox? Maybe I was putting the code in the wrong place… would it go on the page’s CSS or in the ShadowBox CSS?

Any help would be really really appreciated!

Here’s the page in question:
http://www.suubiafrica.org

thanks

If anyone is using thickbox, on a mac with firefox:

Thickbox 3.1 has addressed this issue and it is fixed in the code, HOWEVER, don’t forget to download the png image that is referenced within the thickbox stylesheet. Just get it from the thickbox site, and put it in the same directory as your thickbox stylesheet (or change it if you’d like).

Get the png here: http://jquery.com/demo/thickbox/thickbox-code/macFFBgHack.png

I’m obviously much late, but thanks to the ideas shared here. I’ve gotten much out of trouble. Thanks for the codes.

Занятно пишете, жизненно. Все-таки, для того, чтобы делать по-настоящему интересный блог, нужно не только сообщать о чем-то, но и делать это в интересной форме:)

Сказать – класс! здорово! офигеть! – ничего не сказать…