4

The standard <SharePoint:AspMenu navigation on our SharePoint 2010 site works fine in all browser but Chrome. When I hover over a menu item I can't see the sub menu items like

Contact Us -> Email
Contact Us -> Phone
Contact Us -> Visit

and it's because the standard class

.menu ul.dynamic {
 position: absolute;
 left: -999em;
}

doesn't change the left attribute on hover but it does that in all the other browsers. Have anyone else experienced this issue?

4
  • To me, Ribbon does not seems compatible with Chrome. Dec 2, 2011 at 2:04
  • it doesn't work on a site with anonymous access where the ribbon is not loaded. It is also totally random, I hit ctrl+f5 -> navigation works, ctrl+f5 again -> navigation doesn't work, again f5 doesn't work, again f5 works, again f5 doesn't work and so on :(
    – John
    Dec 2, 2011 at 2:13
  • 1
    I'm facing the same problem - for a Publishing site (i.e. viewable by the public) this is a big issue. Unfortunately Russel's suggestion below isn't very realistic, as we have no control over what browsers our customers and prospective customers are using, so it has to work on Google Chrome regardless of what Microsoft officially supports. And now that Chrome is taking over the second place spot from Firefox (so I heard, no evidence to support this to hand), this issue is even more critical. I'm looking into it further today, and will update if I find anything useful.
    – QMKevin
    Dec 23, 2011 at 15:06
  • Did you ever find a solution to this, John? For me, it seems that only my main work desktop & Chrome have this issue. I have 2 other Desktops and 2 laptops in my office, and they all show the global navigation menu sub-menus just fine, as do all the available PCs for a colleague. I'm no longer looking at this as a global issue, but rather just an instanced issue for my PC - though I did just have one thought: Are you testing from a Windows Server 2008 machine? My main desktop is Windows Server 2008 32bit.
    – QMKevin
    Jan 4, 2012 at 13:29

3 Answers 3

1

Microsoft does not officially support Chrome so I would advise against using it in a production environment.

You could use IETab for Google Chrome to use the IE rendering engine to display SharePoint pages better.

Ultimately you should use IE to test SharePoint UI and in production have users use a supported browser. This will help if you need to make support calls to Microsoft at some stage as well.

EDIT:

There is discussion and some ambiguity around support for Google Chrome and SharePoint 2010, especially around Service Pack 1.

The MSDN site with official browser compatibility do not include Chrome in the list of supported browsers.

I believe the confusion lies in that Microsoft have included Chrome support for Office Web Access 2010 SP1, but not for SharePoint 2010 SP1.

8
  • Sadly, on public facing Websites you cannot control what browser your visitors are using, hence you're ending up developing custom code (like me) to fix the shortcomings of SharePoint which is a real PITA.
    – Sig Weber
    Jan 23, 2012 at 15:31
  • Hardly reason for a down vote. Browser compatibility is the same for SharePoint even for public facing. Provide some information text to users that SharePoint may not display correctly.
    – Russell
    Jan 23, 2012 at 20:59
  • Additionally, MS claims that SP 1 introduced Chrome compatibility (but I haven't verified that myself).
    – Sig Weber
    Jan 23, 2012 at 21:24
  • The MS Technet article still does not include Chrome compatibility (technet.microsoft.com/en-us/library/cc263526.aspx). This article was updated in September 2011, 3 months after the release of SP1.
    – Russell
    Jan 23, 2012 at 22:27
  • Weird, the Microsoft SharePoint Team Blog mentions Chrome support sharepoint.microsoft.com/blog/Pages/BlogPost.aspx?pID=973
    – Sig Weber
    Jan 23, 2012 at 23:27
0

I have added a jQuery code to resolve this problem: EDIT: In order to get this to fully work, I had to

  1. Add it into the $(document).ready -- wouldn't trigger otherwise
  2. Set up an if statement for webkit to keep it from messing up FF or IE
  3. Set up a code block for the quicklaunch dynamic menu
  4. Add extra styles to get the quicklaunch width and the top nav height so the dynamic menus would continue to appear in the right place. --WL

    $(document).ready(function() {
        if ($.browser.webkit) {
            // fix Top Nav (not QuickLaunch)
            $('.s4-tn .static .dynamic-children').mouseover(function(){
                var tnh = $('body #s4-topheader2').height();
                $('.hover').removeClass('hover');
                $('.static .dynamic-children > ul').css('left', '-9999px');
                $(this).children('ul').css('left', '-1px').css('top', tnh);
                $(this).addClass('hover');
            });
    
            $('.static .dynamic-children > ul').mouseover(function(){
                $(this).parent('li').removeClass('hover-off');
                $(this).parent('li').addClass('hover');
            });
    
            // fix QuickLaunch dynamic menu as well
            $('.s4-ql .static .dynamic-children').mouseover(function(){
                var qlw = $('body #s4-leftpanel').width();
                $('.hover').removeClass('hover');
                $('.static .dynamic-children > ul').css('left', '-9999px');
                $(this).children('ul').css('left', qlw).css('top', '0px');
                $(this).addClass('hover');
            });
    
            $('.static .dynamic-children > ul').mouseout(function(){
                $(this).css('left', '-9999px');
                $(this).parent('li').removeClass('hover');
            });
        }
    });
    
0

I'm happy with this, its more simple but helps

var drops = $('.static.dynamic-children').find('ul').parent();

var open = {
  "left" : "inherit",
  "margin-top": "23px",
  "z-index":"2"
};
var close= {
  "left" : "-999em",
  "margin-top": "0",
  "z-index":"0"
};
$(drops).on('mouseenter',function(){
  var drop = $(this).find('ul');
  drop.css(open);  
});
$(drops).on('mouseleave',function(){
  var drop = $(this).find('ul');
  drop.css(close);  
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.