iOS safari not showing all options for select menu

Question

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.

Below are images of the issue:

And this is what it should look like as it is displayed in chrome for iOS:

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.

<script>
var resized = false;

function resizeSelect(selected) {
if (resized) return;
var sel = document.getElementById('category');
for (var i=0; i<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<sel.options.length; i++) {
sel.options[i].innerHTML=sel.options[i].title;
}  
resized = false;
}
</script>

The HTML:

<form id="sortfilter" method="post" action="">
<select id="category" class="styled-select" name="category"  onchange="resizeSelect(this.selectedItem), form.submit()" onblur="resizeSelect(this.selectedItem)" onfocus="restoreSelect()">
<option value="All" selected>All</option>
<option value="Apparel">Apparel</option>
<option value="Boats">Boats</option>
<option value="Cars">Cars</option>
<option value="Food + Drink">Food + Drink</option>
</select>
</form>

Any thoughts as to what the problem may be and how I can fix it?

Thanks in advance.

EDIT: For some reason I am now also having this same problem with chrome for iOS... Help would be much appreciated.

Answer 1

I had the same issue on specific versions of Safari on iOS.

The following html causes the picker not to display the option labels in iOS.

<select>
  <option value="1" label="one"/>
  <option value="2" label="two"/>
  <option value="3" label="three"/>
</select>

When I rewrote the same html in the following way was correctly displayed.

<select>
  <option value="1">one</option>
  <option value="2">two</option>
  <option value="3">three</option>
</select>