Simple enough. However, a teammate recently discovered a bug that seems to be related. In IE8/7 any select dropdown that is dynamically loaded into the page (I'm not sure if static dropdowns are effected as well as none of these pages have them), requires two clicks to open it.

To be more specific, in IE8/7, the first click seems to "focus" on the dropdown, while the second opens it. It Compatibility View, it actually opens for a split-second and then closes. The second click opens it just fine (as long as you remain focused on the dropdown).

I had assumed it might be an issue with what Selectivizr was doing, as it wasn't really designed to work with dynamically loaded content, but after a little bit of debugging, it seems that it's the setTimeout that is causing this strange behavior.

I'm at a complete loss how to fix this without removing my Selectivizr implementation.

It is probably worth noting that the setTimeout is necessary to prevent the browser from attempting to load Selectivizr multiple times if different AJAX calls are made as this can cause serious performance issues within the browser.

Note: this question does not accurately reflect the issue stated in the title, so I updated it to provide better searching! After coming back to this problem a few weeks later, I recognized that my initial debugging had led me down the wrong path. Sorry folks, but I've provided an answer to this which I hope helps!:)

@hagensoft We are indeed using modernizr. It neither works with compatbility mode on or off. However, the issue seems to be specific to IE7/8, IE9 works fine. @ Beetroot-Beetroot ^_^ Yeh, it unfortunately doesn't apply to any element that's loaded after it because it applies attributes to elements to allow particular selectors to work.
–
Jonny AsmarOct 10 '12 at 17:07

1 Answer
1

So, I've finally had a chance to get back to this bug and it seems the solution was staring me in the face all along, I had just totally missed it due to botching up my initial debugging.

It turns out it was a selectivizr issue all along. Unfortunately, making any sort of change dynamically (JS) to a select box in IE8 and below causes it to be redrawn, which forces it to close (or never open, depending on the version/mode). The way selectivizr works is that it discretely adds a class to elements, such as "slvzr-focus", using JS to mimic the behavior of pseudo-classes; in this case ":focus".

As such, it made sense to simply restrict selectivizr from applying this kind of patch to select boxes on focus. My solution is as follows, though it may not be for everyone (alternatively, you can simply ensure that no ":focus" selectors exist in your CSS, which will cause selectivizr to never fire the event):