jQuery模态弹出窗口在Firefox中闪烁问题

Question

jQuery模态弹出窗口在Firefox中闪烁问题

3

这是一个非常奇怪的问题，描述起来同样困难。

我有一个包含下拉列表（选择列表）的div，显示一天中的小时（0-23）。使用标准的jquery方法$("#div").dialog(...)将此div显示为JQuery模态对话框。在显示对话框之前，我设置了上述下拉框中的选定元素。我遇到的问题仅发生在Firefox浏览器中。当选定元素大于或等于20时，屏幕会闪烁，因为jquery模态对话框出现。如果选定值小于20，则模态对话框可以正常出现，屏幕不会闪烁。我知道这听起来很奇怪，但我已经调试了两天，并得出了这个结论。我们都知道，当您下拉选择元素时，您会看到固定数量的选项，其他选项仅在滚动选择框时才能看到。在我的情况下，我看到了前19个元素，从第20个开始，它们不在用户的视口中，但他必须滚动才能到达此选项。我确信，当我将选定元素设置为在视口中看不到的任何内容（但实际上位于下拉列表中最后一个可见元素下方）时，屏幕会闪烁。我通过在选择框开头添加10个额外的元素进行测试，并且从第10个元素开始出现闪烁。（而不是20，当我将选定选项设置为超过第9个元素时，它就开始了）。

我尝试过的事情： 1. 移除设置选定项目的代码，这消除了闪烁，并确认选择框确实是原因。 2. 不要将div显示在jquery模态框中，而是作为常规div显示在屏幕上。这不会引起闪烁，证明jquery对话框正在做一些导致闪烁的事情。 3. 从DOM中删除下拉菜单，并在jquery模态弹出窗口加载后将其添加回去。闪烁仍然存在。还有很多其他选项......但没有成功！

我真的希望有人能帮我弄清楚这里发生了什么！

我不确定如何在此处上传附件，编辑器也不允许我粘贴HTML代码。因此，我已在jquery ui支持论坛上编写了类似的帖子。请在那里查看代码。代码链接谢谢

- Rushi

希望能看到一个链接或一些“代码”。 - Dutchie432

我猜你是指jQuery-UI的dialog()，因为jQuery本身没有内置的dialog()。 - Orbling

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Adam · Answer 1

尝试在div中添加style="overflow:hidden"（或更新样式表）- 我以前在Firefox中使用jQuery时遇到过闪烁问题，通过这种方式解决了。

- Kevin Hicks · Answer 2

我简直无法相信还有其他人遇到了同样的问题。我已经浪费了大约两天时间，试图弄清楚我的asp.net页面到底发生了什么。我实际上认为这是我的updatepanel代码的问题，但我刚刚尝试复制Rushi的示例，它的表现就像他所说的那样。我只是手动向页面添加了以下控件（列表框没有代码），并将其嵌套在一个ajax tabcontrainer中，该tabcontrainer位于一个updatepanel中。如果您将第20项设置为选定状态，则加载该选项卡时页面会闪烁。我尝试了在tabcontainer、tab panel、update panel和dropdownlist上提到的css，但没有成功。疯狂的是，选择第19项不会闪烁，而选择第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>