Table not refreshing properly after jQuery manipulations, in Google Chrome

I made a solution to another of my questions. But, after some recent changes, it's looking good in Firefox 3.6 but showing quite bad display anomalies in Google Chrome. It seems it's not refreshing/redrawing the table header row after the JavaScript code changes its position.

It's especially noticeable when the floating table header row is somewhere on the middle of the table, then you scroll up quickly: it leaves a copy of the header row on the middle of the table, and doesn't redraw the table properly.

The online demo is located he开发者_运维知识库re.

The source code is in a Mercurial bitbucket repository, here.

I'd appreciate if anyone can point me towards a clean solution to making it refresh the display properly in Google Chrome.

Update: I'm seeing it on both Ubuntu Linux 10.04 and Windows XP, with Chrome version 5.0.375.99 beta. It seems more noticeable on Linux, but also a problem on Windows. I've just got 5.0.375.125 beta on Linux and it's still happening.

I'll track this with an issue in BitBucket.

Update 26-Jan-2011: I've tested this with Chrome 9.0.597.67 beta on Ubuntu Linux 10.04, and the problem no longer seems to be apparent.

---

NEWER ANSWER:

I was able to workaround the problem on Windows by just delaying the reset by one "frame" of execution. Wrap the else condition in a setTimeout:

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

OLDER ANSWER:

I don't think the problem manifests on Chrome for Windows (which I just tried). However, it's possible that switching to position:fixed instead of position:absolute would both perform better and workaround your issue. Just use your interval to check if you would have needed to scroll and set position:fixed, else set back.

---

The solution is much simpeler, Chrome has problems with the fact that you have 2 's in your table header.

<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>

remove one, and your problem will be solved