Select box truncating text when body font size changed via javascript on document ready in IE 9

IE 9 is behaving quite strangely for me. I’ve got a page font-size changing control that saves the users setting and then in the document ready sets the body font-size to that size. It works fine, the issue is, when a page with dropdowns loads, in IE 9, sometimes the text is cut off.

I’ve simplified the code down to this jsfiddle to demonstrate. http://jsfiddle.net/z6Paz/3/

the html:

<select id="theSelect" name="theSelect" >                
     <option value="2"  >Letter ( 8.5 x 11&quot; )</option>    
     <option value="3" selected='selected'>A4 ( 8.27 x 11.69&quot; )</option>  
</select>

the css:

select
{
    font-size:1em;
    width:240px;
}

and the javascript:

var userPrefSizeOffset = 2;
$(function(){
    var currentFontSize = $('body').css('font-size');
    var currentFontSizeNum = parseFloat(currentFontSize);
    $('body').css('font-size', currentFontSizeNum + userPrefSizeOffset);

});

has anyone come across this strange behaviour? is there a simple fix?

It does not happen in IE 8, or firefox, or safari, or chrome.

Answer

Select boxes in IE suffer from a long and unfortunate history of extraordinary bugs.

In the days of IE6, the select box was a windowed OS control—a wrapper for the Windows Shell ListBox that existed in a separate MSHTML plane from most other content.

In IE 7, the control was rewritten from scratch as an intrinsic element rendered directly by the MSHTML engine. This helped with some of the more prominent bugs, but some of this unhappy legacy remains. In particular: after a select box is drawn, changes via the DOM do not always propagate as one might expect.

Here, each option in the select list is drawn to exactly the right width for the text it contains when the control is first rendered. When you increase the text size of the page, IE correctly propagates the change to the control itself but does not adjust the width of the options, so text starts overflowing to the next line:

You can fix this by forcing a repaint of the select box. One way to do this is to append a single space character to the select element:

$('select').append(' ');

Alternatively, you could change the style attribute:

$('select').attr('style', '');

Of these, the .append() strategy has the fewest potential side effects and enforces better separation of style and behaviour. (Its essential impact on the DOM is nil.)