MacBook Safari下Amplify UI用户卡片文本堆叠问题解决请求

针对你遇到的MacBook Safari中文本堆叠、截断失效的问题，核心原因是属性冲突和桌面Safari与移动端Safari的渲染差异，结合你提供的配置和生成代码，给出以下针对性修复：

一、修复Bio文本组件的多行截断问题 #

Amplify生成的Text组件自带whiteSpace="pre-wrap"，但你配置了whiteSpace: "nowrap"，加上isTruncated={true}在桌面Safari的多行截断支持不完善，导致文本堆叠。修改配置如下：

Bio: {
  overflow: "hidden", // 替换原"fade"，避免Safari渲染异常
  style: {
    // 移除移动端专属的WebkitOverflowScrolling，桌面端无效且可能干扰
    whiteSpace: "normal", // 配合pre-wrap实现正常换行，避免强制单行
    lineHeight: "1.5", // 明确行高，防止Safari自动计算行高偏差
    // 使用Safari兼容的多行截断方案
    display: "-webkit-box",
    WebkitLineClamp: 3, // 对应maxHeight:80px，约3行文本
    WebkitBoxOrient: "vertical",
    wordBreak: "break-word", // 长单词自动换行，避免溢出堆叠
  },
  maxHeight: "80px",
  fontSize: { base: ".875rem", medium: ".875rem" },
  whiteSpace: "normal" // 覆盖Amplify组件的pre-wrap属性
}

同时，建议通过overrides移除Amplify生成的isTruncated={true}，避免与自定义截断样式冲突。

二、修复Subjects Flex容器的文本堆叠问题 #

你的配置中同时设置了whiteSpace: "nowrap"和wrap: "wrap"，属性冲突导致Safari无法正确换行。修改配置如下：

Subjects: {
  alignItems: "flex-start",
  overflow: "hidden", // 替换原"clip"，增强桌面浏览器兼容性
  style: {
    // 移除移动端专属的WebkitOverflowScrolling
    whiteSpace: "normal", // 取消强制单行，配合wrap实现自动换行
    flexWrap: "wrap", // 明确flex-wrap属性，避免Amplify映射歧义
    overflowY: "auto", // 内容过多时允许垂直滚动，防止堆叠溢出
  },
  maxHeight: "60px",
  wrap: "wrap",
  gap: "xs",
  alignContent: "flex-start",
}

三、全局Safari渲染优化（可选） #

如果仍存在字体渲染模糊或轻微堆叠，可在全局CSS中添加针对桌面Safari的优化：

/* 针对Mac Safari的文本渲染修复 */
@media not all and (pointer: coarse) {
  .amplify-text, .amplify-flex {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }
}

关键修复逻辑说明 #

1. 移除移动端专属的WebkitOverflowScrolling：该属性仅对触屏设备有效，桌面Safari会忽略但可能干扰布局计算
2. 解决属性冲突：whiteSpace: nowrap与flex-wrap: wrap、whiteSpace: pre-wrap的冲突是堆叠的核心原因
3. 使用Safari兼容的截断方案：桌面Safari对原生line-clamp支持需要Webkit前缀，替代Amplify的isTruncated在桌面端的兼容性问题

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