FixedHeader renders improperly in Chrome and Safari until the window is scrolled

klassa

If I put FixedHeader onto a table, and view the page in Chrome or Safari, the header shows up twice... Once I scroll the page, it looks right; until then, it's wrong.

This happens even with the canned demos on this site, so I don't think it's me. :-)

I'm pretty sure it's a Webkit issue, but am not sure how to work around it.

In poking around the code a bit, it looks like the cloned header is given an absolute position that's wrong... And so, you see the original header and the clone, both.

Is there something I could try, to get around the issue?

klassa

So, one workaround is to grab the FixedHeader_Cloned element and do the following with it:

thatElement.hidden = true;

$(window).scroll(function() {
thatElement.hidden = false;
});

$(window).resize(function() {
thatElement.hidden = false;
});

That way, the rogue header is hidden until you scroll... At which point it shows up (in the right place).

Still not sure why it doesn't behave out of the box.

(Also, I just upgraded to 1.9.0. The cloned header is still in the wrong place, there, but is also rendered a little different -- in bold, IIRC.)

klassa

BTW, bStateSave doesn't seem to be working in 1.9.0, at least not with multiple grids on the same page. No issues with the previous release (1.8.x).

matthewjhunt

I was having that same problem. This helped.

SnapsOnThePetrol

Im having the same issue. The workaround works but does anyone know what is going on with this issue and if there is a fix in the works?

SnapsOnThePetrol

Here is a link to an example. Again, the error occurs in the latest version of Chrome.

http://datatables.net/extras/fixedheader/

allan

How very odd! Thanks for the link, I hadn't realised my own example showed this issue! I will look into what is causing it.

Allan