asp:Menu Server Control - Cross Browser Compatibility (Safari/Chrome)

 

Cross browser compatibility is upsetting while working with asp:Menu Server Control, and It was not rendering/working well with Safari and Chrome.

After bit of googling... :-) and found a solution for this.

Approach 1:

I have added below small piece of code snippet in my MasterPage's Page_Load event

        if (Request.UserAgent.IndexOf("AppleWebKit") > 0)
        {
            Request.Browser.Adapters.Clear();
        }

This will tell asp.net not to use an adapter when rendering the menu control. This will work for both Safari and chrome as well because they both use webkit which is how asp.net identifies.

Approach 2:

You can force the menu to work by overwrite the Page_PreInit method on the page and telling the page that the client target is a modern “uplevel” browser:-

protected void Page_PreInit(object sender, EventArgs e)
{
if (Page.Request.ServerVariables["http_user_agent"].ToLower().Contains("safari"))
{
Page.ClientTarget = "uplevel";
}
}

Unfortunately, you can't just add the fix to your Master Page, it doesn't contain a PreInit method as it's a web control not a web page.

Please note that you have to do this in the page class file, and not in the master page class file. Obviously this means you have to do it for every page – which is not ideal.