ASP.NET Menu rendering issue in Google Chrome


Now, that was weird!

Surprisingly, I jumped into a rendering issue with ASP.NET menu in Google Chrome and I observed following glitches:

  1. Sub-menu items were not displaying on hovering over the main menu (say Products)
  2. When I select the main menu item (Product), the respective sub-menu items are displayed horizontally, instead of listing vertically (on hover)

Here goes a sample screenshot


The solution is to check for Chrome user-agent string and clear the browser adapter mapping so that the control will be rendered irrespective of the client browser.

if (Request.UserAgent.IndexOf("Chrome") > 0)
    if (Request.Browser.Adapters.Count > 0)

The ControlAdapter provides a mapping between an ASP.NET Web Control and the adapter used to render the control in client browser.

If you are interested to dig deeper, then have a look at here and here.

Best way to use this code is to create a Base class inherited from System.Web.UI.Page and include this code in appropriate page event. Now, you can inherit this base class is those pages that require this piece of code.

Note: After clearing the Adapter for Chrome, I haven’t experienced any issues with other web controls so far. In case, if you are facing any issue, please feel free to share it.