Mobile Safari multi select bug

html ios select mobile-safari multi-select
Laurenz Glück picture Laurenz Glück · Jan 7, 2016 · Viewed 14.4k times · Source

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:

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

You will have problems with automatically selection!

iOS is automatically selecting the first option after you opened the select (without any user interaction) - but it will not show it to you with the blue select "check".

So if you now select the second option, the select will tell you that two options are selected (but only highlighting one as selected)...

If you now close and open the select again, iOS will automatically deselect the first value - if you repeat, it will be selected again without any user interaction.

Thats a really annoying system bug, which is breaking the user experience!

Answer

Tejal Raval picture Tejal Raval · Aug 2, 2016

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.

Related questions

How do you disable viewport zooming on Mobile Safari?

I've tried all three of these to no avail: <meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;” /> <meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=false;” /> <meta name=”viewport” content=”width=device-width; initial-scale=1.0; …

Read More
How do I remove the blue styling of telephone numbers on iPhone/iOS?

Is there a way to remove the default blue hyperlink colour from a telephone number when viewed on an iPhone? Like a specific Mobile Safari tag or CSS to add? I only have this in place for the number: <…

Read More
Camera access through browser

We are creating an HTML5 website for mobile and need to get camera access through the web browser without being a native app. We are having trouble making this work in iOS. Is anyone aware of a solution for this?

Read More