MaxButtons and Internet Explorer

In the year since MaxButtons has been out, we’ve seen it continue to take somewhat of a foothold in the WordPress ecosystem. The free version has been downloaded over 40,000 times, the Pro version continues to sell each month, and the button packs have been a big hit. However, one issue has eaten at us the last few months – compatibility with Internet Explorer.

Let’s be clear about something: we’re talking about compatibility with IE9 specifically, not IE8, IE7, or IE6. We made our stance about those awhile back, so no need to get into that all over again. Now that we’ve gotten that out of the way, onto the problem.

A Little Background

To understand the issue we must back up a bit. The goal of MaxButtons was to allow anyone to create awesome WordPress buttons without having to write any code. They could see their button design come to life in the button editor, and then when done, simply drop the button shortcode into any content where they wanted to show the button.

To do this, we took the approach of outputting the button CSS code in what we call an inline <style> block. Essentially, wherever a button was used you will see a <style> block with CSS code in the view source of the web page. Note that this is different from inline CSS.

This is important to understand because usually the <style> element is found in the <head> of the HTML document, not within the HTML <body>. However, when web browsers encounter such a situation, they know what to do with it and process the inline <style> blocks just fine.

Hard to Track Down

For most customers, MaxButtons works great in all browsers. Chrome, Firefox, Safari, Opera, IE9, and heck, even IE8 and IE7 (they might not get the gradients, but the buttons work fine).

However, there have been a few very vocal customers whose buttons are great in all browsers except IE9. They’re not even worried about previous versions, just that a lot of their website visitors are using IE9 and the buttons don’t work as expected.

We listened and investigated all of them, but there is no common ground among any of them, aside from one thing – in each of these cases, they are using many buttons on a page. 10 buttons, 20 buttons, we even saw someone with 45 buttons on a single page. And in each of these cases, most of their buttons actually rendered just fine, but the last couple buttons wouldn’t display. Baffling.

This has been extremely frustrating to troubleshoot because we’ve not been able to reproduce any of the reported issues. Not a single one. That makes it unbelievably hard to pinpoint the problem. As if cross-browser compatibility isn’t hard enough.

The IE Problem (We Think)

We do have a theory as to what might be the cause of this. Although we haven’t been able to confirm it, we think it’s possible that the culprit is having multiple inline <style> blocks on a page. For the customer that had 45 buttons on a single page, that’s 45 inline <style> blocks rendered to the client. We think it’s possible that IE simply gets to a point and chokes.

And it chokes at different points for different people. Some people have more powerful computers with more memory and faster CPUs, so they might not experience the same choke point as someone else with less memory and a slower CPU. That would explain why each person who reported the problem experienced something similar yet different.

It might also explain why we couldn’t reproduce the issue with as many as 50 buttons on a page. Our computers are loaded – quad core processors, 16GB of RAM, and solid state hard drives. Our machines aren’t going to cause many programs to choke on anything.

But again, this is an educated guess.

How To Fix It: Use External CSS

We’ve had a couple customers tell us that this problem doesn’t occur with IE10, but that’s still in its infancy. It’s good to know, but not a realistic requirement.

Fixing the problem today first requires an update to the latest version of MaxButtons, in both the free and Pro versions. The latest version includes an advanced option called Use External CSS, which tells the button shortcode to only output the HTML markup for the button, not the inline <style> block.

To ensure the button looks like it should, you need to click the View CSS button so that you can then copy-paste it into your theme stylesheet.

If our theory is correct about IE’s handling of inline <style> blocks, this approach should resolve most of the IE issues.

This approach also has big performance benefits because it will cut down the page size, and for those with many buttons on a page, it will be a dramatic difference. Moving the CSS code to an external stylesheet also helps because the browser will cache the stylesheet file to improve the performance even more.

HTML5 Scoping

Going forward, we’ll be taking a look at the scoped attribute that’s part of the HTML5 spec for the <style> element. It alone might not resolve the IE9 issue, and it’s probably better suited for when IE10 gains more market share, but it’s something we’ll look into.

Test It Out

Now that the latest and greatest MaxButtons is available, we need people to update their versions, test out the new “Use External CSS” option, and let us know how it goes. If problems continue to persist, please use the official Support Forums.