The Tales Of A Bad Browser vol 1

And thus begins the tale of the dreaded Internet Explorer and just one of the devs who was forced to make it behave.

Today I was developing some JavaScript and it was required to work in Internet Explorer 7+. I had checked that it worked in awesome browsers (Chrome). But that’s not a surprise. It also was working in IE8 and up. Which was nice. But unfortunately it was not working at all in IE7.

The JavaScript itself was a simple open/close toggle. Using a function that took in a string parameter. The parameter was the class name of an element. The JavaScript had to check if this element had a specific class applied and add/remove it accordingly. Pretty simple stuff really.

After looking into the issue for a while it became apparent that the class was not being removed from the element. However upon looking closer with the development tools, you could see the class move in the class name string. It went from being between two other class names to being at the end of the string.

Investigating the bug meant mucking around making sure things weren’t being cached. Doing silly tests like applying borders to elements to make sure the JavaScript was actuslly working. And about a metric tonnes worth of alert messages.

Eventually with the help of a colleague, we got to the bottom of it. The JavaScript had started to remove the class. But only after the second time you pressed it. The first time we were noticing the class name move to the end of the string as before. Then the second time it was properly removed and from then on the button functioned as expected.

From there I was able to figure out that it was actually some other JavaScript that was causing the issue. On the ready event of the page I had some JavaScript running that would automatically apply the open or close classes to the elements depending on the screen size. It turns out that for some insanely ridiculous reason, IE7 had decided to not run this particular bit of JavaScript until after the first time the button was clicked. Meaning the class was being removed and then instantly reapplied.

I solved the issue by conditionally not running the auto collapsing code if it was running in IE7. Which fixed everything!

And so endeth the first tale. But it shall not be the last.

Until next time
~ NodeReaver