简体繁体 English

放大太远时 box-shadow 消失

[英]box-shadow disappears when zoomed too far out

原文 2021-01-25 19:22:04 9 0 html/ css/ reactjs/ typescript

I want my first column to freeze when the user scrolls horizontally.当用户水平滚动时，我希望我的第一列冻结。 Originally, the borders were not staying when I scrolled so I looked around, and most places recommended using "box-shadow".最初，当我滚动时边框没有停留，所以我环顾四周，大多数地方都推荐使用“box-shadow”。

However, when I zoom out enough (say 75% or less) the box-shadow disappears entirely when scrolling.但是，当我缩小到足够多（比如 75% 或更少）时，滚动时盒子阴影会完全消失。 I'm sure this is due to the width of my box-shadow only being 1px, but I can't exactly make that thicker as it "leaks" out from the borders and makes the general layout of the table look slightly off.我确定这是因为我的 box-shadow 的宽度只有 1px，但我不能完全让它更厚，因为它会从边框“泄漏”出来并使表格的总体布局看起来略微偏离。

    <TDHeader
      color={
        (level.level + zebraStripOffset) % 2 === 0
          ? "rgba(242, 242, 242, 1)"
          : "rgba(255, 255, 255, 1)"
      }
      shadow={
        "1px 0px 0px 0px rgba(147, 147, 147, 1), -0.5px 0px 0px 0px rgba(147, 147, 147, 1)"
      }
      className="bold"
      rowSpan={2}
      hideLeft={true}
      borderBottom={isLastRow}
    >
      {level.level}
    </TDHeader>

When scrolled at 100% zoom, everything looks dandy:当以 100% 缩放滚动时，一切看起来都很漂亮：

However, in this case, if I even zoom out to 90%, the box-shadow disappears on scroll:但是，在这种情况下，即使我缩小到 90%，box-shadow 也会在滚动时消失：

If I change the horizontal offset to 1.5, things like fine:如果我将水平偏移更改为 1.5，则如下所示：

But, when I zoom back out to 100%, you see that the borders look "offset" as the shadow leaks out to the right a little.但是，当我缩小到 100% 时，您会看到边界看起来“偏移”，因为阴影稍微向右泄漏。