MUI TableHead/TableRow伪元素在Safari定位异常求助

我给MUI的TableHead和TableRow通过伪元素设置了背景色、边框及圆角效果，该效果在Windows和安卓全浏览器中显示正常，但在Mac及iOS系统的Safari浏览器中出现定位异常——背景色与边框未被限制在相对定位的父元素内，而是延伸至Table标签区域。

我已将代码部署至CodeSandbox，可分别在Windows Chrome与Mac Safari中打开查看问题差异；同时为排查问题，我在MUI Box上应用了相同CSS，该效果在Safari中显示正常，确认问题出在伪元素的定位逻辑上。我希望通过伪元素方案解决此问题，若能得到修复方案将十分感谢。

显示效果对比 #

• Windows Chrome浏览器视图：Windows Chrome显示效果
• Safari浏览器视图：Safari显示效果

代码示例链接 #

CodeSandbox示例

相关代码 #

index.tsx #

import * as React from 'react';
import * as ReactDOM from 'react-dom/client';
import { StyledEngineProvider } from '@mui/material/styles';
import Demo from './Demo';

ReactDOM.createRoot(document.querySelector("#root")!).render(
  <React.StrictMode>
    <StyledEngineProvider injectFirst>
      <Demo />
    </StyledEngineProvider>
  </React.StrictMode>
);

Demo.tsx #

import * as React from "react";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import { Paper, Box } from "@mui/material";

import { styled } from "@mui/material/styles";

function createData(
  name: string,
  calories: number,
  fat: number,
  carbs: number,
  protein: number
) {
  return { name, calories, fat, carbs, protein };
}

const rows = [
  createData("Frozen yoghurt", 159, 6.0, 24, 4.0),
  createData("Ice cream sandwich", 237, 9.0, 37, 4.3),
  createData("Eclair", 262, 16.0, 24, 6.0),
  createData("Cupcake", 305, 3.7, 67, 4.3),
  createData("Gingerbread", 356, 16.0, 49, 3.9)
];

const StyledTableHead = styled(TableHead)(() => ({
  position: "relative",
  zIndex: 0,
  backgroundClip: "padding-box",
  borderRadius: "10px",
  "&::after": {
    position: "absolute",
    top: 1,
    left: 1,
    right: 1,
    bottom: 1,
    background: "red",
    border: "1px solid rgba( 255, 255, 255, 0.18 )",
    content: '""',
    zIndex: -1,
    borderRadius: "10px"
  }
}));

const StyledTableRow = styled(TableRow)(() => ({
  position: "relative",
  zIndex: 0,
  backgroundClip: "padding-box",
  borderRadius: "10px",
  "&::after": {
    border: "1px solid transparent",
    position: "absolute",
    top: 1,
    left: 1,
    right: 1,
    bottom: 1,
    background: "yellow",
    border: "1px solid rgba( 255, 255, 255, 0.18 )",
    content: '""',
    zIndex: -1,
    borderRadius: "10px",
  },
}));

export default function BasicTable() {
  return (
    <>
      <Box
        sx={{
          height: "300px",
          width: "300px",
          position: "relative",
          zIndex: 0,
          backgroundClip: "padding-box",
          borderRadius: "10px",
          "&::after": {
            position: "absolute",
            top: 1,
            left: 1,
            right: 1,
            bottom: 1,
            background: "rgba(255, 255, 255, 0.1)",
            border: "1px solid rgba( 255, 255, 255, 0.18 )",
            content: '""',
            zIndex: -1,
            borderRadius: "10px"
          }
        }}
      >
        here box
      </Box>
      <TableContainer component={Paper}>
        <Table sx={{ minWidth: 650 }} aria-label="simple table">
          <StyledTableHead>
            <TableRow>
              <TableCell>Dessert (100g serving)</TableCell>
              <TableCell align="right">Calories</TableCell>
              <TableCell align="right">Fat&nbsp;(g)</TableCell>
              <TableCell align="right">Carbs&nbsp;(g)</TableCell>
              <TableCell align="right">Protein&nbsp;(g)</TableCell>
            </TableRow>
          </StyledTableHead>
          <TableBody>
            {rows.map((row) => (
              <StyledTableRow
                key={row.name}
                sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
              >
                <TableCell component="th" scope="row">
                  {row.name}
                </TableCell>
                <TableCell align="right">{row.calories}</TableCell>
                <TableCell align="right">{row.fat}</TableCell>
                <TableCell align="right">{row.carbs}</TableCell>
                <TableCell align="right">{row.protein}</TableCell>
              </StyledTableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>
    </>
  );
}

package.json #

{
  "dependencies": {
    "@emotion/react": "latest",
    "@emotion/styled": "latest",
    "@mui/material": "latest",
    "@types/react": "latest",
    "@types/react-dom": "latest",
    "react": "latest",
    "react-dom": "latest",
    "typescript": "latest"
  },
  "description": "https://github.com/mui/material-ui/blob/v5.16.0/docs/data/material/components/table/BasicTable.tsx",
  "devDependencies": {
    "react-scripts": "latest"
  },
  "main": "index.tsx",
  "scripts": {
    "build": "react-scripts build",
    "eject": "react-scripts eject",
    "start": "react-scripts start",
    "test": "react-scripts test"
  }
}

内容的提问来源于stack exchange，提问作者Desi Memes