bug(Table): Sticky column loses the bottom border

[OGLara]

Reproduction

• Components: https://material.angular.io/components/table/examples

Steps to reproduce:

1. Go to the material examples website and go to the example Table with sticky columns

Expected Behavior

What behavior were you expecting to see?
Display the bottom border in the sticky column in Chrome as it does in Firefox.

Actual Behavior

What behavior did you actually see?
The bottom borders disappear

Environment

• Angular: 11
• CDK/Material: 11.1.1
• Browser(s): Chrome 88.0.4324.150
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[crisbeto]

Did you have to do anything in order for the border to disappear? It seems to be working for me on Chrome 88.

[OGLara]

No, it's the default. I have tried Microsoft Edge 88 and the same thing happens to me.

If I change the color of the border, you can see that it is thinner.

[crisbeto]

I couldn't reproduce it on a different machine either. My suspicion is that this could be some weird artifact due to a particular OS/driver/browser combination.

[OGLara]

Yesterday I was testing on another computer, it has a resolution of 1080p, and it looks fine. I think the problem comes from the combination of screen resolution and browser.

The screen that gives me problems has a resolution of 3840x2160 and a text increase of 150% (This is what Windows recommends).

[crisbeto]

That makes sense, we've had similar reports about other components. The problem is that when the border is that thin, the browser has to approximate it when accounting for zoom. At some point it may approximate it closer to 0px than to 1px. I'm not sure whether we can do much about it without making the border thicker.

[OGLara]

So, it's a bug in the Chrome approximation, or in general Chromium because it also happens in Edge, since it doesn't happen in Firefox.

[wagnermaciel]

@crisbeto Can we close this issue if this is due to browser behavior & outside of our control?

[crisbeto]

Yes, I don't think that we can do much about it.