title: iOS safari not showing all options for select menu
body: <p>I have a select menu on a website that I'm in the process of making mobile friendly and it works perfectly on desktop and on chrome for iOS, but on safari for iOS it shows only the selected option. It will scroll through and can select the other options, but they are invisible.</p>
  <p>Below are images of the issue:</p>
  <p><a href="https://i.stack.imgur.com/tms5X.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tms5X.png" alt="iOS safari" /></a>
  <a href="https://i.stack.imgur.com/sqNQq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sqNQq.png" alt="iOS safari" /></a></p>
  <p>And this is what it should look like as it is displayed in chrome for iOS:</p>
  <p><a href="https://i.stack.imgur.com/AGNcl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AGNcl.png" alt="iOS chrome" /></a></p>
  <p>The issue seems to lie with this script I am using to resize and re-align the select menu depending on which option is selected.</p>
  <pre><code>&lt;script&gt;
  var resized = false;
  
  function resizeSelect(selected) {
  if (resized) return;
  var sel = document.getElementById('category');
  for (var i=0; i&lt;sel.options.length; i++) {
  sel.options[i].title=sel.options[i].innerHTML;
  if (i!=sel.options.selectedIndex) sel.options[i].innerHTML='';
  }
  resized = true;
  sel.blur();
  }
  
  function restoreSelect() {
  if (!resized) return;
  var sel = document.getElementById('category');
  for (var i=0; i&lt;sel.options.length; i++) {
  sel.options[i].innerHTML=sel.options[i].title;
  }  
  resized = false;
  }
  &lt;/script&gt;
  </code></pre>
  <p>The HTML:</p>
  <pre><code>&lt;form id=&quot;sortfilter&quot; method=&quot;post&quot; action=&quot;&quot;&gt;
  &lt;select id=&quot;category&quot; class=&quot;styled-select&quot; name=&quot;category&quot;  onchange=&quot;resizeSelect(this.selectedItem), form.submit()&quot; onblur=&quot;resizeSelect(this.selectedItem)&quot; onfocus=&quot;restoreSelect()&quot;&gt;
  &lt;option value=&quot;All&quot; selected&gt;All&lt;/option&gt;
  &lt;option value=&quot;Apparel&quot;&gt;Apparel&lt;/option&gt;
  &lt;option value=&quot;Boats&quot;&gt;Boats&lt;/option&gt;
  &lt;option value=&quot;Cars&quot;&gt;Cars&lt;/option&gt;
  &lt;option value=&quot;Food + Drink&quot;&gt;Food + Drink&lt;/option&gt;
  &lt;/select&gt;
  &lt;/form&gt;
  </code></pre>
  <p>Any thoughts as to what the problem may be and how I can fix it?</p>
  <p>Thanks in advance.</p>
  <p>EDIT: For some reason I am now also having this same problem with chrome for iOS... Help would be much appreciated.</p>