HTML Select menu becomes randomly unresponsive

Since the <select> element UI is handled by the OS in several browsers (which makes their complete styling much more complicated, or impossible), I would guess that’s it is a bug on OS level, or a bug at the browser that relates to some OS UI functionality — definitely not a problem of the source HTML, which is plain simple and according to specs).

For the browser, the <select> element is completely normal: you can see it at DOM, even manipulate it (it also listens to events as well). If you detach and reattach it to the DOM, it works normally again (open up and enable selecting). If you just run the code below at the console window, you’ll get it working again:

var s=document.getElementsByTagName('select'),
    i=s.length,
    a=document.createElement('div'),
    b;
while(i-->0) {
    s[i].parentNode.insertBefore(a, s[i]);
    b=s[i].parentNode.removeChild(s[i]);
    a.parentNode.insertBefore(b,a);
    a.parentNode.removeChild(a);
    b=null;
}

My guess is that when the browser is blurred, the UI elements might get caught by some sort of OS garbage collector, and when you get back at the browser, it just expects the OS to display it again (but it can’t find it). But it’s just a guess — I’d need to profile Safari memory in order to really get to it.

I could replicate it on Safari 7.0.1 running on Mac OS X 10.9.1, but couldn’t replicate it on Firefox 28.0a2 (Aurora) or Chrome 34 (Canary).