Question

My website has various pages and every page has a duplicated navigation menu along the top. This works fine on every browser on a PC. However, when on a Mac in safari or iPad, it works only on some pages.

When on portraits page, the text from the drop down menu ‘Info’ disappears, as does the text from the client area drop down menu.

These menu’s work fine on all other pages, and the code is exactly the same, I copy and pasted it so I really don’t understand why this can happen. The links still work, if you click in the blank space it takes you to the link, but you can’t actually see what you clicking.

I’ve updated all my JavaScript files and can’t think of anything else to try.

http://www.yorkshirephotographer.net

Code:

jQuery(document).ready(function(){
    /* for top navigation */
    jQuery(" #menu ul ").css({display: "none"}); // Opera Fix
    jQuery(" #menu li").hover(function(){
        jQuery(this).find('ul:first').css({visibility: "visible",display: "none"}).slideDown(400);
    },function(){
        jQuery(this).find('ul:first').css({visibility: "hidden"});
    });
    jQuery(" #menu2 ul ").css({display: "none"}); // Opera Fix
    jQuery(" #menu2 li").hover(function(){
        jQuery(this).find('ul:first').css({visibility: "visible",display: "none"}).slideDown(400);
    },function(){
        jQuery(this).find('ul:first').css({visibility: "hidden"});
    });
});

Answer 1

it might be a rendering problem.
Try adding some fix css to your elements :

-webkit-transform: translateZ(0);

It should force rendering…
you can do it with javascript like this:

jQuery("#menu ul, #menu li").css("-webkit-transform", "translateZ(0)");

You can also apply the css property to all children of #menu. I’d add the anchor selector too:

jQuery("#menu, #menu ul, #menu li, #menu a").css("-webkit-transform", "translateZ(0)");

If it still doesn’t work, try removing cufons.