Thursday, 26 July 2012

ASP.NET Menu Control Issue In Chrome and Safari


INTRODUCTION

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


Safari
Chrome

While it's working perfectly with Mozilla FireFox and IE


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 search over Google and found these 3 solutions working 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 pre-added data from safari.browser file.
  • 4) Now add the following tags to that browser file.
  • 5) Now only you need is to save that file.
setps:

Method 2

The other solution is using Server side code. For fixing bug we need to write this two line of code to each and every Page's Page_PreInit event, Or if MasterPage file is used then no need to add this lines to each and every page, just copy and paste this lines to Only MasterPage's Page_PreInit event. This code is working 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 is working properly in all browser like Mozilla Firefox,IE,Safari and Chrome.


Chrome
Safari

Enjoy the trick!!!

No comments:

Post a Comment