Material UI Badge组件在Safari 16.3中显示异常求助

问题分析 #

这是Safari 16.3对CSS动态尺寸计算的兼容性问题：Material UI Badge默认用flex布局居中内容，当徽章数字变化时，Safari无法正确重绘元素宽高，导致挤压变形。同时代码里用<span>嵌套<li>的非标准DOM结构，会加重Safari的渲染异常。

修复方案 #

1. 强制指定徽章最小宽高
   通过sx样式给Badge内部徽章元素固定最小尺寸，确保数字有足够展示空间：

<Badge 
  badgeContent={posts > 0 ? posts : 0} 
  invisible={posts === 0} 
  color="error" 
  showZero={false} 
  key={`${posts}`}
  sx={{
    '& .MuiBadge-badge': {
      minWidth: '22px',
      minHeight: '22px',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      padding: '0 4px', // 为多位数预留额外空间
    }
  }}
>
  <li style={{ fontWeight: type === 2 ? "bold" : "400" }}>
    <Link to={`/case/id=${props.caseId}/posts`} onClick={() => readPosts(2)}>Wpisy</Link>
  </li>
</Badge>

2. 修正非标准DOM结构
   移除<span>嵌套<li>的错误写法，改用符合语义的分隔符：

<span>/</span>
{/* Badge组件 */}
<span>/</span>

3. 关闭过渡动画（可选）
   若问题仍存在，禁用Badge默认过渡动画，避免渲染动画时出现尺寸异常：

sx={{
  '& .MuiBadge-badge': {
    transition: 'none',
  }
}}

验证效果 #

修改后刷新页面，切换不同数字测试，Safari下的徽章应该能稳定展示，不再出现挤压变形。

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