React记忆游戏移动端卡片覆盖Modal问题求助

问题描述 #

我正在使用React开发一款记忆游戏，当所有卡片配对完成后会显示弹窗（Modal）。但在移动端浏览器中，CSS网格每行首列的三张卡片会覆盖z-index值更高的Modal及Backdrop组件。我推测这是CSS层面的问题，但无法定位原因，目前使用Emotion CSS进行样式开发。

移动端表现：CSS网格每行首列的三张卡片会覆盖在z-index更高的Modal和Backdrop上方

核心代码 #

主组件代码 #

return (
    <div css={s.wrapper}>
      <Global styles={globalStyle} />
      <header css={s.header}>
        <h1 css={s.heading}>React Memory Game</h1>
        <p css={s.attempts}>
          {matchCount(cards) === 8
            ? `Game completed. You needed ${attempts} attempts`
            : attempts !== 1
            ? `${attempts} attempts`
            : '1 attempt'}
        </p>
      </header>
      <div css={s.grid}>
        {cards.map((card) => {
          const isFlipped =
            card.match || card.id === pickedCard1Id || card.id === pickedCard2Id
          return (
            <div key={card.id} css={s.card}>
              <img
                css={[s.card, s.cardFront, isFlipped && s.flippedFront]}
                src={card.src}
                alt='Front side of the card'
              />
              <img
                css={[s.card, s.cardBack, isFlipped && s.flippedBack]}
                src={cardBack}
                onClick={() => !disabled && handleClick(card)}
                alt='Back side of the card'
              />
            </div>
          )
        })}
      </div>
      <Button text={attempts ? 'Restart Game' : 'New Game'} onClick={shuffleCards} />
      {modal && (
        <Modal
          attempts={attempts}
          newGame={() => {
            shuffleCards()
            setModal(false)
          }}
          closeModal={() => setModal(false)}
        />
      )}
      {modal && <Backdrop onClick={() => setModal(false)} />}
    </div>
  )
}

const globalStyle = {
  body: css({
    backgroundColor: t.bgColor1,
  }),
}

const s = {
  wrapper: css({
    fontFamily: t.fontFamily,
    color: t.color1,
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
  }),
  grid: css({
    display: 'grid',
    gridTemplateColumns: 'repeat(4, 1fr)',
    margin: '1.5rem 0.5rem',
    [t.mq.s]: { gap: '0.25rem' },
    [t.mq.m]: { gap: '0.5rem' },
    [t.mq.l]: { gap: '0.85rem' },
    [t.mq.xl]: { gap: '1rem' },
  }),
  header: css({
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
  }),
  heading: css({
    [t.mq.s]: { fontSize: '1.75rem' },
    [t.mq.m]: { fontSize: '2.1rem' },
    [t.mq.l]: { fontSize: '2.25rem' },
  }),
  attempts: css({
    fontFamily: 'inherit',
    fontSize: '1.25rem',
    textAlign: 'center',
  }),

// 我推测问题出在这里：
 card: css({
    position: 'relative',
    cursor: 'pointer',
    img: {
      width: 86,
      display: 'block',
      userSelect: 'none',
    },
    [t.mq.s]: { borderRadius: 3.5 },
    [t.mq.l]: { borderRadius: 5, img: { width: 100 } },
  }),
  cardFront: css({
    position: 'absolute',
    transform: 'rotateY(90deg)',
    transition: 'transform 0.2s ease-in ',
  }),
  flippedFront: css({
    transform: 'rotateY(0deg)',
    transitionDelay: '0.2s',
    pointerEvents: 'none',
  }),
  cardBack: css({
    transition: 'transform 0.2s ease-in',
    transitionDelay: '0.2s',
    [t.mq.s]: {
      outline: `1px solid ${t.color3}`,
      outlineOffset: '-1px',
      borderRadius: 4.5,
    },
    [t.mq.l]: {
      outline: `2px solid ${t.color3}`,
      outlineOffset: '-2px',
      borderRadius: 6.5,
    },
  }),
  flippedBack: css({
    transform: 'rotateY(90deg)',
    transitionDelay: '0s',
  }),
}

Modal组件CSS #

const s = {
  wrapper: css({
    display: 'flex',
    flexDirection: 'column',
    gap: '1rem',
    position: 'fixed',
    top: '30%',
    justifyContent: 'center',
    alignItems: 'center',
    textAlign: 'center',
    backgroundColor: t.bgColor1,
    border: `2px solid ${t.color3}`,
    borderRadius: 10,
    padding: '2rem',
    zIndex: 10,
  }),
  heading: css({
    fontSize: '2.5rem',
  }),
  subHeading: css({
    fontSize: '1.5rem',
  }),
}

Backdrop组件CSS #

const backdrop = css({
  position: 'fixed',
  width: '100vw',
  height: '100vh',
  backgroundColor: 'rgba(0, 0, 0, 0.6)',
  zIndex: 9,
  top: 0,
  left: 0,
})

已尝试的解决方案 #

• 调低卡片及cardFront的z-index至低于Modal和Backdrop
• 将Modal移出主容器
  以上方法均未解决问题。

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