在 Google Chrome 中，jQuery 操作后表格无法正确刷新

Question

我向another of my questions 发送了solution。但是，经过最近的一些更改，它在 Firefox 3.6 中看起来不错，但在 Google Chrome 中却显示出非常糟糕的显示异常。在 JavaScript 代码更改其位置后，它似乎没有刷新/重绘表格标题行。

当浮动表格标题行位于表格中间某处时尤其明显，然后您快速向上滚动：它会在表格中间留下标题行的副本，并且无法正确重绘表格.

The online demo is located here.

源代码在Mercurial bitbucket repository, here。

如果有人能指出一个干净的解决方案，让它在 Google Chrome 中正确刷新显示，我将不胜感激。

更新：我在 Ubuntu Linux 10.04 和 Windows XP 上都看到了它，Chrome 版本为 5.0.375.99 beta。它在 Linux 上似乎更明显，但在 Windows 上也是一个问题。我刚刚在 Linux 上获得了 5.0.375.125 测试版，它仍在进行中。

我将通过issue in BitBucket 跟踪此事。

更新 2011 年 1 月 26 日：我已经在 Ubuntu Linux 10.04 上使用 Chrome 9.0.597.67 测试版对此进行了测试，问题似乎不再明显。

Answer 1

新答案：

我可以通过将重置延迟一“帧”执行来解决 Windows 上的问题。将 else 条件包装在 setTimeout 中：

                setTimeout(function() {
                    floatingHeaderRow.css("visibility", "hidden");
                    floatingHeaderRow.css("top", "0");
                }, 1);

老答案：

我认为 Windows 版 Chrome 上没有出现问题（我刚刚尝试过）。但是，切换到 position:fixed 而不是 position:absolute 可能会更好地执行并解决您的问题。只需使用间隔检查是否需要滚动并设置位置：固定，否则返回。

Answer 2

解决方案要简单得多，Chrome 的问题在于表头中有 2 。

<thead>
<tr class="tableFloatingHeader" style="position: absolute; left: 0px; visibility: hidden; top: 0px; ">
    <th>table1 col header</th>
    <th>table1 col header</th>
</tr><tr class="tableFloatingHeaderOriginal">
    <th>table1 col header</th>
    <th>table1 col header</th>
</tr>
</thead>

去掉一个，你的问题就解决了