JQuery Modal Popup Flicker in Firefox

classic Classic list List threaded Threaded
1 message Options
Reply | Threaded
Open this post in threaded view

JQuery Modal Popup Flicker in Firefox


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 am attaching the code. Simply open this HTML in Firefox to see the problem.