JQuery Modal Popup Firefox scintillement

Question

Ceci est un problème très étrange et est également difficile à décrire.

J'ai un div qui contient une liste déroulante (liste de sélection) affichant les heures d'un jour (0-23). Cette div affiche une boîte de dialogue modale JQuery en utilisant la méthode jquery standard de $ ("# div"). Dialog (...). Avant d'afficher la boîte de dialogue, je définis l'élément sélectionné dans la boîte de sélection ci-dessus. Le problème auquel je suis confronté se produit uniquement dans Firefox. Lorsque l'élément sélectionné est supérieur ou égal à 20, l'écran scintille lorsque la boîte de dialogue modale jquery apparaît. Si la valeur sélectionnée est inférieure à 20, la boîte de dialogue modale s'affiche correctement et l'écran ne clignote pas. Je sais que cela semble étrange, mais j'ai débogué ce problème sur deux jours et c'est la conclusion à laquelle je suis arrivé. Comme nous le savons tous lorsque vous faites défiler l'élément de sélection, vous voyez un nombre fixe d'options et les autres options sont visibles uniquement lorsque vous faites défiler la boîte de sélection. Dans mon cas, je vois les 19 premiers éléments et à partir du 20ème, ils ne sont pas dans la fenêtre de l'utilisateur mais il doit faire défiler pour arriver à cette option. Je suis sûr que quand je mets l'élément sélectionné à quelque chose qui n'est pas vu dans la fenêtre (mais qui est en effet présent sous le dernier élément visible dans la liste déroulante), l'écran scintille. J'ai testé cela en ajoutant 10 éléments supplémentaires au début de la boîte de sélection et le scintillement a commencé à se produire à partir du 10ème élément. (au lieu de 20, il a commencé quand j'ai placé l'option choisie à n'importe quoi sur le 9ème élément). Choses que j'ai essayées: 1. Retiré le code qui a placé l'article choisi et ceci enlève le scintillement confirmant que la boîte de sélection est en effet la cause. 2. N'affichez pas la div dans une modalité jquery mais comme une div régulière sur l'écran. Cela ne provoque pas de scintillement confirmant que la boîte de dialogue jquery fait quelque chose qui provoque le scintillement. 3. Suppression de la liste déroulante de DOM et ajout de celle-ci après le chargement de la popup jquery modal. Le scintillement reste. et beaucoup d'autres options ... mais pas de succès!

J'apprécierais vraiment si quelqu'un m'aide avec ce qui se passe ici!

Je ne savais pas comment télécharger une pièce jointe ici et l'éditeur ne m'a pas laissé coller du code HTML. Donc, j'ai écrit un post similaire sur le forum de support de jquery ui. S'il vous plaît voir le code là.

Link for the Code

Merci

Answer 1

Essayez d'ajouter style = "overflow: hidden" à la div (ou mise à jour stylesheet) - J'ai eu des problèmes de scintillement avec jQuery dans Firefox avant qui ont été résolus de cette façon.

Answer 2

Je ne peux pas croire que quelqu'un d'autre a ce même problème. J'ai officiellement perdu deux jours à essayer de comprendre ce qui se passait avec ma page asp.net. En fait, je pensais que c'était un problème avec mon code updatepanel, mais j'ai juste essayé de reproduire l'exemple de Rushi et il a agi comme il l'a dit. J'ai juste ajouté manuellement le contrôle suivant à la page (aucun code derrière pour la liste) et il est imbriqué dans un ajax tabcontrainer à l'intérieur d'un panneau de mise à jour. Si vous définissez l'élément 20 comme sélectionné, la page scintille lors du chargement de cet onglet. J'ai essayé le css mentionné sur le tabcontainer, le panneau à onglets, le panneau de mise à jour et la liste déroulante, mais pas de chance. Fou sélectionnez l'article 19 pas de scintillement, 20 (qui est en fait le 21e élément) et il scintille. Cela me rend fou. Et oui, cela se produit uniquement dans 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>