JQuery Modal Popup Firefox flicker

This is a very strange problem and is equally difficult to describe.

I have a div that contains a dropdown (select list) displaying the hours of a day (0-23). This div is displayed a JQuery modal dialog using the standard jquery method of $("#div").dialog(...). Before showing the dialog, I set the selected element in the above select box. The issue I am facing happens in Firefox only. When the selected element is greater than or equal to 20, the screen flickers as the jquery modal dialog comes up. If the selected value is less than 20, the modal dialog comes up fine and screen does not flicker. I know this sounds strange but I have debugged this issue over two days and this is the conclusion I have come to. As we all know when you drop down the select element, you see a fixed number of options and the other options are seen only when you scroll down the select box. In my case, I see the first 19 elements and from 20th onwards, they are not in the user's viewport but he has to scroll to get to this option. I am sure that when I set the selected element to anything that is not seen in the viewport (but is indeed present below the last visible element in the dropdown), the screen flickers. I tested this by adding 10 extra elements to the beginning of the select box and the flicker started happening from the 10th element onwards. (instead of 20, it started when I set the selected option to anything over 9th element).

Things I have tried: 1. Removed the code that set the selected item and this takes out flicker confirming that the select box is indeed the cause. 2. Don't display the div in a jquery modal but as a regular div on the screen. This does not cause flicker confirming that jquery dialog is doing something that causes the flicker. 3. Removed the dropdown from DOM and added it back after the jquery modal popup loads. The flicker remains. and a whole lot of other options... but no success !

I would really appreciate if someone helps me with what's going on here !

I wasn't sure how to upload an 开发者_如何学Cattachment here and the editor didn't let me paste HTML code. So, I have written a similar post on jquery ui support forum. Please see the code there.

Link for the Code

Thanks

Try adding style="overflow:hidden" to the div (or update stylesheet) - I've had flicker issues with jQuery in firefox before that have been resolved this way.

I cannot believe that someone else is having this same issue. I have officially wasted about two days trying to figure out what the heck was going on with my asp.net page. I actually thought it was an issue with my updatepanel code, but I just tried to reproduce Rushi's example and it acted just as he said. I just manually added the following control to the page (no code behind for the listbox) and it is nested in an ajax tabcontrainer inside an updatepanel. If you set item 20 as selected the page flickers when loading that tab. I tried the css mentioned on the tabcontainer,tab panel, update panel and dropdownlist, but no luck. Crazy select item 19 no flicker, 20 (which is actually the 21st item) and it does flicker. This is driving me insane. And yes this only occurs in FireFox ( running 3.6).

<asp:DropDownList ID="DropDownList1" runat="server" >
<asp:ListItem Text="" Value="0" />
<asp:ListItem Text="....................................1" Value="1" />
<asp:ListItem Text="2" Value="2" />
<asp:ListItem Text="3" Value="....3" />
<asp:ListItem Text="4" Value="4" />
<asp:ListItem Text="5" Value="5" />
<asp:ListItem Text="6" Value="6" />
<asp:ListItem Text="7" Value="7" />
<asp:ListItem Text="8" Value="8" />
<asp:ListItem Text="9" Value="9" />
<asp:ListItem Text="10" Value="10" />
<asp:ListItem Text="11" Value="11" />
<asp:ListItem Text="12" Value="12" />
<asp:ListItem Text="13" Value="13" />
<asp:ListItem Text="14" Value="14" />
<asp:ListItem Text="15" Value="15" />
<asp:ListItem Text="16" Value="16" />
<asp:ListItem Text="17" Value="17" />
<asp:ListItem Text="18" Value="18" />
<asp:ListItem Text="19" Value="19" Selected="True" />
<asp:ListItem Text="20" Value="20"  />
<asp:ListItem Text="....................................21" Value="21" />
<asp:ListItem Text="22" Value="22" />
<asp:ListItem Text="23" Value="23" />
<asp:ListItem Text="24" Value="24" />
<asp:ListItem Text="25" Value="25" />
<asp:ListItem Text="26" Value="26" />
<asp:ListItem Text="27" Value="27" />
<asp:ListItem Text="28" Value="s28" />
</asp:DropDownList>