Mobile Safari multi select bug

Question

If found a really annoying bug on the current (iOS 9.2) mobile safari (first appearing since iOS 7!)

If you using multi select fields on mobile safari - like this:

Answer 1

Solution for safari multi select bug and Empty and Disabled option tick related issue:

<select multiple>
<optgroup disabled hidden></optgroup>
<option value="0">All</option>
<option value="1">Test 1</option>
<option value="2">Test 2</option>
<option value="3">Test 3</option>
<option value="4">Test 4</option>
</select>

Add a disabled and hidden optgroup before the real options.

Answer 2

After a long research I found the following (not most beautiful) but working solution:

The trick is to add a empty and disabled select option at the fist position:

<select multiple>
    <option disabled></option>

    <option value="test1">Test 1</option>
    <option value="test2">Test 2</option>
    <option value="test3">Test 3</option>
</select>

This will prevent iOS from automatically selecting the first option and keep the selection values right and clean!

The empty option is not visible and the count of the selections is correct.