Take the 2-minute tour ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.

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?

share|improve this question
    
To me, Ribbon does not seems compatible with Chrome. –  Amit Kumawat Dec 2 '11 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 '11 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 '11 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 '12 at 13:29
add comment

3 Answers 3

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.

share|improve this answer
    
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 '12 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 '12 at 20:59
    
Additionally, MS claims that SP 1 introduced Chrome compatibility (but I haven't verified that myself). –  Sig Weber Jan 23 '12 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 '12 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 '12 at 23:27
show 3 more comments

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');
            });
        }
    });
    
share|improve this answer
add comment

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);  
});
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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