Glitch/odd behavior with Z-Index and JQuery in Safari

Glitch/odd behavior with Z-Index and JQuery in Safari

Hi! This is my first post on this forum, so if I do something wrong feel free to let me know :)
I originally created this question on stack overflow, foolishly in the mid-afternoon on sunday, so there has been very few views. I'm reposting an (edited version) of it here, to see if I have more luck here.

I've created an advertisement panel at the very top of my webpage. This can be expanded or collapsed. When the expand/collapse bar reaches the navigation bar, they merge and become fixed. In safari, however, when they merge, instead of the navigation bar going in front of the ad bar like I'd want it to, it goes behind it, briefly obscuring the navigation bar. When the scrolling is finished, it clicks in front. This does not happen in chrome.


The first clip is in Safari, and the second is in chrome. You also may note that at the very top in safari the text becomes bold for some reason.

Is there a workaround for this?

The full code for my webpage can be found on   JSfiddle

NOTE: You'll have to minimize the ad first, I haven't coded it to merge without the ad being minimized yet.

It appears that Jsfiddle is being nice about it and it works there even in safari. 

I've done some testing in other browsers, and it seems that it works in all other current browsers. It appears to work in safari for windows as well, although unlike the mac version, apple no longer updates it as far as I know. So this problem just seems to be on the mac version of safari.

I dissected the code of jsfiddle, and it seems that it's not a script that's making it function correctly, it's the <iframe> tags. For some reason safari reads this correctly. I successfully tested this using an entirely separate html document. Would there be some way to "trick" safari into thinking it was an iframe? Just brainstorming here.