title: <select> with size attribute: iPhone renders blank
body: <p>When rendering a select dropdown as below,  the iPhone renders it blank.  How can I fix this?</p>
  
  <pre><code>&lt;select size="3"&gt;
    &lt;option value="volvo"&gt;Volvo&lt;/option&gt;
    &lt;option value="saab"&gt;Saab&lt;/option&gt;
    &lt;option value="opel"&gt;Opel&lt;/option&gt;
    &lt;option value="audi"&gt;Audi&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>The above example from <a href="http://www.w3schools.com/tags/att_select_size.asp" rel="noreferrer">http://www.w3schools.com/tags/att_select_size.asp</a>.  Their sample is <a href="http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select_size" rel="noreferrer">http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select_size</a></p>
  
  <p>In Firefox (and all other browsers),  it renders as:</p>
  
  <p><img src="https://i.stack.imgur.com/naU6S.jpg" alt="Firefox example rendered select dropdown"></p>
  
  <p>However,  on an iPhone,  it's rendered blank.  This is very bad for usability as the visitor doesn't know what's in the box (in our application,  it's for selecting their address from several possibilities).</p>
  
  <p><img src="https://i.stack.imgur.com/EuIvK.jpg" alt="iPhone example rendering"></p>
  
  <p>I've created a JSFiddle:  <a href="http://jsfiddle.net/bqMEv/3/" rel="noreferrer">http://jsfiddle.net/bqMEv/3/</a>  The iPhone rendering is as follows;  note that there's nothing shown when both:</p>
  
  <ul>
  <li>size is greater than 1</li>
  <li>and height is specified in CSS</li>
  <li>and no option is selected</li>
  </ul>
  
  <p><img src="https://i.stack.imgur.com/UnkmG.jpg" alt="Rendering from JSFiddle"> </p>
  
  <p>Removing the CSS height shows that the iPhone ignores the size attribute.</p>
  
  <p><img src="https://i.stack.imgur.com/ADJEH.jpg" alt="Removing CSS height"></p>