ASP.NET Menu Control Issue in Chrome and Safari

• Download source - 282.4 KB

CodeProject

Introduction

While using ASP.NET menu control at that time, Safari as well as Chrome did not render that control properly. That’s the reason why mouse over does not work properly in Chrome and Safari with ASP.NET menu control as shown in the below images.

Safari

Chrome

While it's working perfectly with Mozilla Firefox and Internet Explorer.

IE9

Mozilla Firefox

Solutions

As you can see, the look and feel of the main menu is different. Submenu does not show up. So what is the solution for this? I searched Google and found that these 3 solutions work perfectly.

Method 1

1. Go to Solution Explorer in Visual Studio and add “ASP.NET Folder” named “APP_Broswers”.
2. Add new item “Browser File” to this special folder and name it “safari.browser” for both browser Chrome as well as Safari.
3. Now delete all per-added data from safari.browser file.
4. Now add the following tags to that browser file:

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

5. Now, the only thing is that you need to save that file.

Steps

Method 2

The other solution is using Server side code. For fixing bug, we need to write these two lines of code to each and every Page's Page_PreInit event, or if MasterPage file is used, then there is no need to add these lines to each and every page, just copy and paste these lines to only MasterPage's Page_PreInit event. This code works for both Safari as well as Chrome.

protected void Page_PreInit(object sender, EventArgs e)
{
    if(Request.ServerVariables["http_user_agent"].IndexOf
    ("Safari",StringComparison.CurrentCultureIgnoreCase) != -1)
    {
        Page.ClientTarget = "uplevel";
    }
}

OR Use this alternate code

protected void Page_PreInit(object sender, EventArgs e)
{
  if (Request.UserAgent.Contains("AppleWebKit")) 
     Request.Browser.Adapters.Clear();
}

After applying any of these changes, ASP.NET menu works properly in all browsers like Mozilla Firefox, Internet Explorer, Safari and Chrome.

Chrome

Safari

Enjoy the trick!!!