Hide the clone table's container when it's not needed

[finkrer]

1. Use Safari
2. Create a table in a container with border-radius and a shadow border (ring in Tailwind CSS)
3. Scroll down until the header sticks
4. Scroll back up
5. The clone table's container is somehow above the rounded border

How a 0 height element manages to create that thing is anyone's guess, just Safari being Safari.

Possible fixes:

1. Apply display: none to the container when it's empty.
2. Remove the styles added to the container when it sticks when the user scrolls back up. My guess is that the clipping is caused by position: fixed somehow, since removing it solves the issue.

[archfz]

It's a little bit hard for me to visualize the issue as in where the dom+css is wrong in this case. I tried to reproduce in firefox, just by simply putting border radius and shadow on the table container, but it works okay when the table header is not sticky. There is however a slight issue when the table header is sticky and only a bit lower then the main header, meaning touching the border radius.

I am thinking that you might be able to solve your issue by adding a border radius on the clone container as well: <div className="clone_table table_container" style={{borderTopLeftRadius: 10, borderTopRightRadius: 10}}>

I don't have mac so please see and test.

Besides looking at this, I am bit confused on how this reproduces on mac. I probably would need your exact layout and css. But in the demo when the header is not sticky, it has 0 height and it doesn't even align with the table anymore, meaning it's at the top.

[finkrer]

My exact setup is a full application which would be impactical to include as an example. I was hoping that, for example, reverting styles after the header stops being sticky is not too much of a problem even without reproduction, since it sounds like a reasonable thing to do.

As for being confused, so am I. But Safari has tons of bugs like that. You blur a blue div and it becomes green. All we can do is work around stuff like that.

I am thinking that you might be able to solve your issue by adding a border radius on the clone container as well: <div className="clone_table table_container" style={{borderTopLeftRadius: 10, borderTopRightRadius: 10}}>

Yeah, that's a reasonable fix, but I've tried that already. It doesn't work. The clipping part is probably not the container itself, but something else. The thing is, it's only clipping when the container is present and is fixed. No container? No clipping. Not fixed? No clipping. Why? No idea, it's Safari. It works just fine in Chrome.

[archfz]

Feel free to open pull request. As I cannot test your proposed changes whether they do the trick. Will regression test it only.

[archfz]

I was not able to reproduce the issue using browserstack. In any case the proposed change is logical and not causing any regressions as far as I can tell, so I have added it in 1.3.0.

I am closing this for now, but please test and provide feedback as I couldn't confirm that it is solving the issue.

[finkrer]

Thanks for trusting me on this, even with no reproduction. I can confirm that the issue has been resolved in the new version.

[finkrer]

@archfz Just a heads up, you left a console.log there.

vh-sticky-table-header/src/StickyTableHeader.ts

Line 120 in 9052f68

console.log(tableTop, tableBottom);

[archfz]

Thank you for reporting. Removed and released in 1.3.1