The selection box is misplaced when I scroll the table (only safari)

[RomanKwok]

[gabrielliwerant]

Hello @RomanKwok. Can you create a codesandbox example that demonstrates the issue? I have a PC, so I cannot download the latest safai for testing. There are some options I can use for testing, but the free trials are limited in capabilities, so having an example ready to go that I can load in a browser will be a big help.

[RomanKwok]

Hi, @gabrielliwerant. Thanks for your reply.
I created a sample with codesandbox, please check it.
thanks.

https://codesandbox.io/embed/polished-sun-2dj96?fontsize=14

[patorjk]

I can confirm this. It is also present in iOS devices on Chrome (and probably other browsers). If you alter @RomanKwok's example use to use "scrollMaxHeight", you'll see the problem on the iPhone in Chrome. If you create a table with 10+ rows, you'll also see the issue happens for the table headers when you scroll right.

The issue is due to "position: sticky" in TableSelectCell.js and TableHeadCell.js. It's unclear to me if the bug is in Safari and iOS Chrome's implementation of sticky, or the desktop browser's implementation of sticky. Whatever the case, it can be fixed: simply don't stick for the positions you don't want to stick. What this means is removing "top:0px" from the rule for checkboxes that aren't the header, and removing "left:0px" for table header labels. Ex:

TableSelectCell.js

    fixedHeader: {
      position: 'sticky',
      top: '0px',
      left: '0px',
      zIndex: 100,
    },
    fixedLeft: {
      position: 'sticky',
      left: '0px',
      zIndex: 100,
    },

...

  const cellClass = classNames({
    [classes.root]: true,
    [classes.fixedHeader]: fixedHeader && isHeaderCell,
    [classes.fixedLeft]: fixedHeader && !isHeaderCell,
    [classes.headerCell]: isHeaderCell,
  });

TableHeadCell.js:

    fixedHeader: {
      position: 'sticky',
      top: '0px',
      //left: '0px',
      zIndex: 100,
      backgroundColor: theme.palette.background.paper,
    },

There's also a related bug here: if you have 10+ columns and you scroll right, you'll see the column text overlaps the checkboxes on the left. This can be fixed by setting the background color of TableSelectCells to theme.palette.background.paper and adjusting the CSS rules in TableBodyRow.js:

    root: {
      '&.MuiTableRow-root.Mui-selected': {
        '& td': {
          backgroundColor: '#ededed',
        }        
      }
    },
    hover: {
      '&:hover': {
        '& td': {
          backgroundColor: '#ededed',
        }
      }
    },

[patorjk]

Issue fixed in version 3.0.0 of the table.