angular / components

Component infrastructure and Material Design components for Angular
https://material.angular.io
MIT License
24.35k stars 6.74k forks source link

bug(COMPONENT): Table border offsets when scrolling up and down #23954

Open isaacguo opened 2 years ago

isaacguo commented 2 years ago

Is this a regression?

The previous version in which this bug was not present was

No response

Description

When scrolling down the table, table offsets 1px up 2021-11-11 12 01 08

Reproduction

Steps to reproduce:

  1. Go to https://material.angular.io/components/table/examples
  2. Locate Table with sticky header
  3. Set the table css in DevTools border: 1px solid red so that it is easier to notice the issue
  4. Scroll down
  5. Notice that the table top border also moves up 1px. 6 Scroll all the way down to the bottom
  6. Scroll up
  7. Notice that the table bottom border also moves down 1px

Expected Behavior

Table border should never offset

Actual Behavior

Border top and bottom offsets 1px down and up along with the scrolling up and down

Environment

leomayer commented 1 year ago

You could add for the head some style with

position: sticky;
z-index: 10;

Sounds little bit hacky especially since you already provided a property for being sticky. But at least this fixes this problem. I believe as well that #15885 is somehow related to this issue.

The problem appears as well if you have two rows in the column header. As a base one could use https://stackblitz.com/edit/angular-material-table-multiple-header-rows?file=app%2Ftable-basic-example.css