IE8 and AjaxControlToolkit – Visibility bug
Well, I finally downloaded IE8 to see how some of the sites I’ve worked on behave. Most things work just fine, however, I did find a pretty significant problem with the AjaxControlToolkit.
I’ve been using the Tab control quite a bit, and I noticed that, when switching between tabs, the new tab was not showing up. The old tab was hiding, though…
Debugging has led me to the setVisible method located in “Common/Common.js” in the AjaxControlToolkit. Specifically, the problem existed in the following code:
if (element && value != $common.getVisible(element))
{
if (value)
{
if (element.style.removeAttribute)
{
element.style.removeAttribute("display");
}
else
{
element.style.removeProperty("display");
}
}
else
{
element.style.display = 'none';
}
element.style.visibility = value ? 'visible' : 'hidden';
}
In the above code, removeAttribute() was being called, but the display attribute remained (display=none). I looked up the removeAttribute method, and it does return a boolean value indicating if the method was successful or not. Well, as it turns out, the method (for whatever reason) is not successul in IE8!
I’m not sure why this fails in IE8, but it does cause a problem. Fortunately, there’s a pretty quick fix to this:
if (element && value != $common.getVisible(element))
{
if (value)
{
if (element.style.removeAttribute)
{
if(!element.style.removeAttribute("display"))
{
element.style.display = '';
}
}
else
{
element.style.removeProperty("display");
}
}
else
{
element.style.display = 'none';
}
element.style.visibility = value ? 'visible' : 'hidden';
}