Internet Explorer 10 - Sticky header is jumping when attached to its parent

[pankajkumar45]

Open demo URL http://mottie.github.io/tablesorter/docs/example-widget-sticky-header.html in internet explorer 10 and go to section Attach sticky header to its parent.
Notice that sticky header is jumping when scrolling table.

Can you please provide a fix for the same asap.

Thanks in advance.

[Mottie]

Hi @pankajkumar45!

I'll try to look into this issue again this weekend.

[Mottie]

Sorry, I don't think it is possible to fix this issue...

If position:fixed is used, yes, the sticky header remains at the top of the window and even inside of vertically overflowed containers. But if the container has any horizontal overflow, the overflowed portion of the header is not hidden, because of position:fixed.

Using position: absolute and adjusting the top position while scrolling is the only solution that I have found that works in all cases. Yes, it does jump a bit. Maybe the issue can be solved by adding a transition to animate the header into place after scrolling has stopped?

[pankajkumar45]

Thanks For your valuable suggestions, i will let you know as soon as i am done with implementation.

[CrazyPython]

I'm having this problem too- here a demo of the [production] site.

Can you please look into it?

[Mottie]

Hi @CrazyPython!

Is this problem in IE10 only? I don't think MS even supports IE10 anymore.

I tried viewing that page in IE11, and it wouldn't load the table because of a few issues:

• SCRIPT438: Object doesn't support property or method 'includes'
• HTTPS security is compromised by res://ieframe.dll

I'm going to close this issue, but please feel free to continue our discussion here.

[CrazyPython]

@Mottie Oh, I'm seeing it happening in Chromium actually... I may have missed a bit of the title 😅

[Herst]

I don't think MS even supports IE10 anymore.

Not on any desktop OS.

[nhannt14]

Any solution for this problem, bro?

[Mottie]

Any solution for this problem, bro?

Actually looking at this again, I realized that the widget is constantly updating the class on the header. When it is only updated when the class needs to change, it smooths it out. Odd, that it's rock-solid in Firefox without this modification.

I'll make this change in the master branch, so it'll be available there, but I need to resolve a few other issues before the next release.

[nhannt14]

Really hope to see the next version.

[Mottie]

Hmm, Chrome is weird. Even though the header has a position: sticky set and nothing is being updated, it still jumps a little sometimes, just not as often. I'll push the changes to the master branch now. I should have a new release available soon.