JQuery modal popup firefox flickering

Question

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

I have a div that contains a drop down list (select a list) displaying the hours of the day (0-23). This div displays a modular jQuery dialog using the standard jquery method $ ("# div"). Dialog (...). Before displaying the dialog, I set the selected item in the selection box above. The problem I encountered only occurs in Firefox. When the selected item is greater than or equal to 20, the screen flickers as the jquery modal dialog appears. If the selected value is less than 20, the modal dialog box looks beautiful and the screen does not flicker. I know this sounds strange, but I debugged this question for two days, and this is the conclusion I came to. As we all know, when you drop the select element, you see a fixed number of options,and other options are visible only when scrolling down the selection field. In my case, I see the first 19 elements and from the 20th, they are not in the user’s viewing window, but he must scroll to go to this option. I am sure that when I install the selected item on everything that is not visible in the viewport (but is really present below the last visible item in the drop-down list), the screen flickers. I checked this by adding 10 additional elements to the beginning of the selection field, and the flickering started from the 10th element forward. (instead of 20, it started when I installed the selected option on something more than the 9th element).which is not visible in the viewport (but is really present below the last visible item in the drop-down list), the screen flickers. I checked this by adding 10 additional elements to the beginning of the selection field, and the flickering started from the 10th element forward. (instead of 20, it started when I installed the selected option on something more than the 9th element).which is not visible in the viewport (but is really present below the last visible item in the drop-down list), the screen flickers. I checked this by adding 10 additional elements to the beginning of the selection field, and the flickering started from the 10th element forward. (instead of 20, it started when I installed the selected option on something more than the 9th element).

Things I tried: 1. The code that sets the selected item is removed, and this displays a flicker confirming that the selection box is indeed the cause. 2. Do not show the div in modal jquery, but like a regular div on the screen. This does not cause flickering, confirming that the jquery dialog is doing something that causes flickering. 3. Remove the dropdown from the DOM and add it back after loading the jquery modal popup. Flicker remains. and many other options ... but no success!

I would really appreciate if someone would help me with what is happening here!

I was not sure how to download the application here, and the editor did not allow me to embed the HTML code. So, I wrote a similar post on the jquery ui support forum. Please see the code there.

Code Link

thank

Answer 1

style = "overflow: hidden" div ( ). jQuery firefox, .

Answer 2

, - . , , asp.net. , , , , . ( ), ajax tabcontrainer . 20 , . css, tabcontainer, , , . Crazy select item 19 no flicker, 20 ( 21- ), . . , FireFox ( 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>