WebKit浏览器中React按钮组件渲染异常问题求助

问题说明 #

在可变宽度的div内放置的按钮，仅在Safari及所有WebKit内核浏览器中渲染效果与其他浏览器不一致：

• 常规浏览器渲染效果：
• Safari/WebKit内核浏览器渲染效果：

组件调用代码 #

...<some react code>...
  return isDownMd ? (
    <Container isShowingTour={isShowingTour} style={{ position: 'relative' }}>
      <PerformanceDiv
        isShowingTour={isShowingTour}
        data-testid="price-indicator"
        className="indicators container"
        ref={mobileRef}
      >
        <SingleIndicatorDiv>{renderIndicator('weeklySales')}</SingleIndicatorDiv>
        <SingleIndicatorDiv>{renderIndicator('completedOrders')}</SingleIndicatorDiv>
        <SingleIndicatorDiv>{renderIndicator('salesTotal')}</SingleIndicatorDiv>
        <SingleIndicatorDiv>{renderIndicator('cancelledOrders')}</SingleIndicatorDiv>
        <SingleIndicatorDiv>{renderIndicator('averageTicket')}</SingleIndicatorDiv>
        <SingleIndicatorDiv>{renderIndicator('productsVisit')}</SingleIndicatorDiv>
        <SingleIndicatorDiv>{renderIndicator('conversionRate')}</SingleIndicatorDiv>
      </PerformanceDiv>
      {showArrows[0] && (showAllArrows || !isDownXs) ? (
        <ArrowLeft
          type="button"
          onClick={() => handleClickArrow(true)}
          variant="contained"
          color="primary"
          data-testid="arrow-left-md"
        >
          <ArrowForwardIos style={{ width: '75%' }} />
        </ArrowLeft>
      ) : null}
      {showArrows[1] && (showAllArrows || !isDownXs) ? (
        <ArrowRight
          type="button"
          onClick={() => handleClickArrow(false)}
          variant="contained"
          color="primary"
          data-testid="arrow-right-md"
        >
          <ArrowForwardIos style={{ width: '75%' }} />
        </ArrowRight>
      ) : null}
    </Container>
  ) : (
    <div style={{ position: 'relative' }}>
      <GridPerformance
        container
        item
        spacing={2}
        data-testid="price-indicator"
        className="indicators"
        ref={gridRef}
      >
        <Grid item xs={2} style={{ minWidth: '208px' }}>
          {renderIndicator('weeklySales')}
        </Grid>
        <Grid item xs={2} style={{ minWidth: '220px' }}>
          {renderIndicator('completedOrders')}
        </Grid>
        <Grid item xs={2} style={{ minWidth: '220px' }}>
          {renderIndicator('salesTotal')}
        </Grid>
        <Grid item xs={2} style={{ minWidth: '220px' }}>
          {renderIndicator('cancelledOrders')}
        </Grid>
        <Grid item xs={2} style={{ minWidth: '220px' }}>
          {renderIndicator('averageTicket')}
        </Grid>
        <Grid item xs={2} style={{ minWidth: '220px' }}>
          {renderIndicator('productsVisit')}
        </Grid>
        <Grid item xs={2} style={{ minWidth: '220px' }}>
          {renderIndicator('conversionRate')}
        </Grid>
      </GridPerformance>
      {showArrows[0] ? (
        <ArrowLeft
          type="button"
          onClick={() => handleClickArrow(true)}
          variant="contained"
          color="primary"
          data-testid="arrow-left"
        >
          <ArrowForwardIos style={{ width: '75%' }} />
        </ArrowLeft>
      ) : null}
      {showArrows[1] ? (
        <ArrowRight
          type="button"
          onClick={() => handleClickArrow(false)}
          variant="contained"
          color="primary"
          data-testid="arrow-right"
        >
          <ArrowForwardIos style={{ width: '75%' }} />
        </ArrowRight>
      ) : null}
    </div>
  )
}

样式代码（styled-components） #

export const ArrowRight = styled(Button)`
  background-color: #0086ff !important;
  color: #ffffff !important;
  position: absolute;
  right: 0%;
  top: 43%;
  border-radius: 50% !important;
  padding: 2px !important;
  min-width: 24px;
  ${({ theme }) => theme.breakpoints?.down('md')} {
    right: 1%;
  }
  ${({ theme }) => theme.breakpoints?.down('xs')} {
    right: 3%;
  }
`

修复方案尝试 #

针对WebKit内核的渲染差异，可逐一测试以下方案：

• 固定按钮尺寸：给按钮添加明确的width: 24px; height: 24px;，避免WebKit对min-width的解析偏差，确保正圆形显示。
• 统一盒模型：添加box-sizing: border-box; border: none;，清除组件默认的边框和内边距影响。
• 调整定位逻辑：检查父容器position: relative是否生效，尝试给父容器添加overflow: hidden，或微调right属性值适配WebKit。
• WebKit专属样式：通过媒体查询针对WebKit内核单独调整：

  @media screen and (-webkit-min-device-pixel-ratio:0) {
    .ArrowRight {
      padding: 0 !important;
      transform: translateY(-50%); /* 配合top:50%实现垂直居中，替代43%的硬编码 */
    }
  }
  

• 图标对齐修正：给内部图标添加display: block; margin: 0 auto;，强制图标居中显示。

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