Menu
I'm experiencing quite an odd issue with <select> menus. When I go back to a page containing a <select> after I have clicked out of it (or minimized it) the <select> sometimes collapses and becomes unresponsive. I have checked all of my code, and it is 100% valid, further I have seen this happen on other sites as well.
I have experienced <select> menus collapsing in the latest version of Safari (available for OSX 10.6.8) as well as the latest versions of Chrome and Firefox (tested both on Windows Vista and OSX 10.6.8). Oddly enough I have not been able to reproduce the <select> collapse in Chrome running on Windows 8... One last tidbit: it seems that the length of the <select> element affects the probability of the menu collapsing (that is to say, the more <option> elements in a <select>, the more likely it is to collapse. Sometimes a <select> menu will collapse after being selected and clicked out of once, sometimes it can take 5 or 6 attempts.
My question is: What causes this <select> collapse issue, and is there a known work around? Please see the example code below, it's very simple, but the <select> menu has nonetheless collapsed in the browsers/operating systems I mentioned earlier. Thanks in advance!
<!doctype html> <html> <head> <title>Select Test</title> </head> <body> <select name ="Test"> <option value = "0">0</option> <option value = "1">1</option> <option value = "2">2</option> <option value = "3">3</option> <option value = "4">4</option> <option value = "5">5</option> <option value = "6">6</option> <option value = "7">7</option> <option value = "8">8</option> <option value = "9">9</option> <option value = "10">10</option> <option value = "11">11</option> <option value = "12">12</option> <option value = "13">13</option> <option value = "14">14</option> <option value = "15">15</option> <option value = "16">16</option> <option value = "17">17</option> <option value = "18">18</option> <option value = "19">19</option> <option value = "20">20</option> <option value = "21">21</option> <option value = "22">22</option> <option value = "23">23</option> <option value = "24">24</option> <option value = "25">25</option> <option value = "26">26</option> <option value = "27">27</option> <option value = "28">28</option> <option value = "29">29</option> <option value = "30">30</option> <option value = "31">31</option> <option value = "32">32</option> <option value = "33">33</option> <option value = "34">34</option> <option value = "35">35</option> <option value = "36">36</option> <option value = "37">37</option> <option value = "38">38</option> <option value = "39">39</option> <option value = "40">40</option> <option value = "41">41</option> <option value = "42">42</option> <option value = "43">43</option> <option value = "44">44</option> <option value = "45">45</option> <option value = "46">46</option> <option value = "47">47</option> <option value = "48">48</option> <option value = "49">49</option> <option value = "50">50</option> <option value = "51">51</option> <option value = "52">52</option> <option value = "53">53</option> <option value = "54">54</option> <option value = "55">55</option> <option value = "56">56</option> <option value = "57">57</option> <option value = "58">58</option> <option value = "59">59</option> <option value = "60">60</option> <option value = "61">61</option> <option value = "62">62</option> <option value = "63">63</option> <option value = "64">64</option> <option value = "65">65</option> <option value = "66">66</option> <option value = "67">67</option> <option value = "68">68</option> <option value = "69">69</option> <option value = "70">70</option> <option value = "71">71</option> <option value = "72">72</option> <option value = "73">73</option> <option value = "74">74</option> <option value = "75">75</option> </select> </body> </html> Update: Here is a screenshot of a collapsed/unresponsive <select> menu in Safari 5.1.9 running on OSX 10.6.8 (this is a different mac than the one I was using earlier). It became unresponsive after 3 attempts (selecting an option, then clicking out of the browser). It does not reveal the option list when clicked, and is completely unresponsive until the page is reloaded. I'll be downloading chrome on the mac shortly.
Update 2: According to @webdad3, this issue is also present in IE9
Update 3:
Here is a link to the source code I posted above, but in JSbin. Courtesy of @starbeamrainbowlabs.
http://jsbin.com/eXOMeRI/1/edit
Update 4:
According to @Zarazthuztra, this issue is also present in OSX 10.8.
Update 5:
I'm taking @cloudcoder2000's advice and posting this link in the question itself. I believe it shows that a <select> should not collapse (like many of us are experiencing) regardless of the number of <option>s it contains.
Is there a max number of options (values) in HTML drop down control?
I would like to also thank everyone for their help thus far.
Update 6: I fear this question is beginning to stagnate... If anyone has any theories as to what is causing this issue (regardless of how "off-the-wall" it may seem) let me know and I'll test it asap.
Update 7: Just confirm: I've experienced this collapse issue on several pages that do not use Javascript. Further, the example code I posted above (which does not contain any Javascript) has collapsed for me and a few other stackoverflow users (across different operating systems and browsers).
Update 8:
@Capile was able to reproduce the collapse issue in Safari 7.0.1 running on Mac OS X 10.9.1.
Update 9: By using @Capile's code, I was able to get the <select> to "uncollapse" in Safari 5.1.10 (running on OSX 10.6.8). Please read his answer for the full details. I will be testing his code in Chrome and Firefox later today, or tomorrow. This is really promising, I think we're getting close to solving this. I would just like to thank everyone again for their help thus far, you guys are great!
Update 10: I finally got a chance to test @Capile's code in Chrome on one of my Snow Leopard (10.6.9) machines. I had quite a bit of trouble getting the <select> to collapse this time, but after a few minutes of trying, it finally did. After pasting his code into the console the <select> "uncollapsed" (to put it as inelegantly as possible). This is quite curious, because if this "collapse" issue is related to system-level garbage collection, then one would think that the a <select> would "collapse" fairly consistently across browsers, but this isn't the case. I've tested a myriad of browsers (across multiple operating systems) and <select> "collapse" seems exceedingly common in certain browsers (such as Safari)... I'm admittedly not an expert programmer so I may be wrong, but in any case, I just wanted to update this question so that greater minds could mull over the new information.
Update 11: I just added a bounty to this question in an attempt to generate more interest (I hope it helps). Anyway, I was able to get the <select> to collapse in the latest version Firefox (running on OSX 10.6.9) last night. I unfortunately did not get a chance to test @Capile's code in Firefox, but I will try to do so today.
428
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).
77
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
