Select element with multiple and optgroup on iphone/ipad - it's gone mental!

I’ve got a page which features a select element with multiple selections allowed, where many of the options are within OPTGROUPs. I’ve just noticed that on the iphone and ipad, it acts really strangely.

First of all, here’s the html:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Email</title>
</head>
<body>
	<form action ="email.php" method="post">
		<select name="to[]" MULTIPLE size=10 >
			<option value='staff_1'>hilary</option>
			<option value='staff_2'>shane</option>
			<option value='staff_3'>kath</option>
			<option value='staff_4'>rocky</option>
			<option value='staff_5'>julie</option>
			<option value='staff_6'>simone</option>
			<option value='staff_7'>duncan</option>
				
			<optgroup label='Management'>
				<option value='staff_8'>miles</option>
				<option value='staff_9'>mickey</option>
				<option value='staff_10'>andrew</option>
				<option value='staff_11'>ryan</option>
				<option value='staff_12'>jack</option>
				<option value='staff_13'>ian</option>
				<option value='staff_14'>tim</option>
			</optgroup>
			<optgroup label='Sales'>
				<option value='staff_15'>henry</option>
				<option value='staff_16'>emmy-lou</option>
				<option value='staff_17'>emil</option>
				<option value='staff_18'>jean-pierre</option>
				<option value='staff_19'>john</option>
			</optgroup>
			<optgroup label='Accounts'>
				<option value='staff_20'>katrina</option>
				<option value='staff_21'>donny</option>
				<option value='staff_22'>flo</option>
				<option value='staff_23'>danny</option>
				<option value='staff_24'>chris</option>
			</optgroup>
			<optgroup label='Departments'>
				<option value='dept_1'>Sales</option>
				<option value='dept_2'>Accounts</option>
				<option value='dept_3'>Management</option>
				<option value='dept_'>Everyone</option>
			</optgroup>         
		</select>
	</form>
</body>
</html>

This passes validation in an online validator. And, as far as I can tell, there’s nothing strange about it at all. And it all seems to work OK on all major browsers on windows and mac.

However on the iPhone (and, so I’m told, the iPad), it’s fine when you select options outside of the optgroup. But selecting items in the optgroup it seems to have a mind of it’s own. You can tick, say, 4 items in the gui, but the text on the select box might say ‘2 items’. And when you choose ‘done’, and then re-open the select box gui, there might be only 2 items now selected. It does seem to work correctly if you select options near the bottom, and then work your way upwards, but not working downwards.

I’ve recreated this behaviour on the iphone on safari and chrome. You can see a demo here: http://www.theseveninches.co.uk/select.html. Try it on an iphone and see if it acts strange.

Am I going mental here? Is there something wrong with this HTML or is it apple that’s gone nuts? And is there a workaround?