SharePoint 2007/2010 Navigation Issues With Safari on Yosemite

After recently upgrading to Apple’s OS X Yosemite, some of our team members started noticing odd behavior when viewing our public SharePoint 2010 site (www.credera.com) in Safari. They noticed our top navigation looked different. It appeared to have lost its visual styling. However, this behavior was only happening in the latest version of Safari that comes with Yosemite.

In this post, I will describe the symptoms so you can identify this behavior in your own sites. I will provide a brief explanation of the cause. And most importantly, I will outline the steps to resolve this issue.

SYMPTOMS

It should be relatively easy to determine if your site is exhibiting this behavior. Below are two screenshots of www.credera.com taken with Safari. The first screenshot was taken with an older version of Safari and is the way the navigation should look. The second screenshot shows what the navigation looks like now with the latest version of Safari.

To take it a step further, you can view the source code of the page. Prior to upgrading, the source for the navigation elements were rendered with unordered list elements (<ul>, <li> and <a> tags). After upgrading, the source has changed to simple span and anchor elements (<span> and <a> tags).

If you do not have a Mac running Yosemite available, you can still validate this from a PC using Internet Explorer 11. To do so, you need to access the developer tools by hitting F12. Then on the “Emulation” panel, you need to change the “User agent string” property to “Custom” and supply a “Custom string” value of “Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10) AppleWebKit/600.1.25 (KHTML, like Gecko) Version/8.0 Safari/600.1.25”.

CAUSE

If you have a SharePoint 2007 or 2010 site that leverages the ASPMenu control (which will be the case by default), you are susceptible to this issue. This is due to the fact that the latest version of Safari has changed its browser ID and SharePoint doesn’t know if it is compatible or not. Therefore, it renders the ASPMenu in a kind of “safe mode” which changes the HTML structure.

RESOLUTION

Fortunately, the resolution to this issue is very easy to fix and should have no impact to the site’s uptime. What we need to do is tell SharePoint this new browser is compatible with the ASPMenu. To do so, the following steps must be taken on each of the web frontend servers (WFEs) for each Web Application.

1.  Locate the SharePoint browser definition file. This is typically located at \\Inetpub\wwwroot\wss\VirtualDirectories\port_number\​App_Browsers\compat.browser where port_number is the port number of the Web Application.

2.  Edit the SharePoint browser definition file to include the following XML that defines the new browser and its compatibility:

<browser refID="Safari60"> <controlAdapters> <adapter controlType="System.Web.UI.WebControls.Menu" adapterType="" /> </controlAdapters></browser>

3.  Save your changes and retest. Please note: When retesting you may need to clear your browser cache to see the changes take effect.

FINAL THOUGHTS

While this issue may be easy to fix, the impact to your organization’s image may not be if you do not take action quickly. Consumers of web content expect highly usable sites and will quickly turn away if your site does not meet those expectations. Therefore, I highly encourage you to take action whether you are the person responsible for this type of activity or not. Engage your IT team if necessary. And if you don’t feel comfortable making a change like this, we here at Credera would gladly assist you. If you are interested in learning how Credera can help, please contact Credera at info@credera.com or send a tweet to @CrederaMSFT.

• Why Arial Is Bad For Your Brand
• Hobby
• Ceramic Pots