JQuery Chosen plugin causing vertical page overflow issue in IE - css

Question

I have a multiple selector in my view which works as expected except when I reset the list using JavaScript.
Before the list is reset there is no vertical scrollbar and after it has been reset lots of empty space is added below the views footer creating a vertical scrollbar and I don't know why this empty space is appearing.
Here is a before screenshot of my view:
And this is the after screenshot when the reset list button has been clicked:
The steps I take when causing this issue are:
Select one or more items in the list
Click reset list button
Chosen multiselect refreshes correctly, but the CSS issue occurs
My code decleration, which works fine minus the unexpected CSS behaviour, is as follows:
<select id="chosenMultiSelect" multiple="multiple" >
<option>Item 1</option>
<option>Item 2</option>
<option>Item 3</option>
<option>Item 4</option>
<option>Item 5</option>
<option>Item 6</option>
<option>Item 7</option>
<option>Item 8</option>
<option>Item 9</option>
</select>
<button id="btnClear" class="btn btn-default">Reset list</button>
<script type="text/javascript">
$(document).ready(function () {
$('#chosenMultiSelect').chosen({ width: '100%' });
$('#btnClear').click(function () {
$('#chosenMultiSelect').val('').trigger('chosen:updated');
});
});
</script>
Other information:
I have tested this in IE, Chrome, and Firefox, and it only seems to happen in IE's browser (versions 9, 10, and 11).
This issue doesn't occur if I click the reset list button BEFORE items are selected in the multi selector.
Update 02/11/2015
I have experienced this in other situations now. For example using it as a single select inside a Bootstrap Modal which would (not always but sometimes) result in loads of overflow being added to the page.
Has nobody else experienced this and do you know what is causing it? could it be other CSS defined somewhere etc.

Answer 1

Decided to have another look at this and found that somebody had reported a similar issue on the GitHub page.
I tried updating the version I was using from 1.0 to 1.5.1 and this didn't work, however the issue raiser did provide a CSS work around which doesn't completely resolve the problem but provides a much better solution but is dependent on different screen sizes.
Here is the CSS code that needs including...
.chosen-container .chosen-drop {
overflow-y: auto;
max-height: 400px;
}
bharos who raised the issue and provided the work around also provides the following comment
This is a workaround, as I understood that the chosen dropdown, when
in hidden state is having a large size, when it has large number of
options. So when we restrict the max-height this doesn't happen. Make
this max-height to a comfortable value according to your requirements.
But this is an issue which needs to be addressed from chosen, this is
just a workaround.