Mac Safari中text-align:justify仅点击后生效的React/MUI问题

这个Safari专属Bug确实挺让人头疼的——明明CSS规则写得没问题，初始渲染就是不生效，点一下反而正常了。结合你用React+Material-UI、靠white-space: pre-line处理换行、文本来自Firestore的场景，我整理了几个针对性的解决思路：

可能的问题根源 #

Safari在处理动态加载的文本，尤其是搭配white-space: pre-line的内容时，偶尔会在初始渲染阶段跳过text-align: justify的规则计算。点击元素触发了浏览器的重绘/重排流程，才让对齐样式真正生效。

解决方案尝试 #

1. 手动触发元素重绘 #

既然点击能触发重绘，那我们可以在组件挂载或文本加载完成后，模拟这个触发逻辑：

import { useEffect, useRef } from 'react';
import Typography from '@mui/material/Typography';

function DescriptionText({ description }) {
  const textRef = useRef(null);

  useEffect(() => {
    if (textRef.current) {
      // 强制触发重绘的小技巧：临时修改样式再还原
      textRef.current.style.display = 'none';
      void textRef.current.offsetHeight; // 触发浏览器重排
      textRef.current.style.display = '';
    }
  }, [description]); // 文本更新时也触发重绘

  return (
    <Typography 
      paragraph 
      variant="body2" 
      ref={textRef}
    >
      {description}
    </Typography>
  );
}

2. 优化CSS属性组合 #

试试给Typography的根样式补充几个属性，帮Safari更好地识别对齐规则：

// theme.js中的配置
MuiTypography: {
  root: { 
    whiteSpace: "pre-line",
    word-break: "break-word", // 强制长单词换行，辅助Safari计算对齐范围
    text-align-last: "justify" // 针对最后一行的对齐，部分场景能触发规则生效
  },
  body2: { 
    fontSize: 15, 
    textAlign: "justify" 
  }
}

3. 针对Safari的CSS Hack修复 #

如果上面的方法都没效果，可以用专门匹配Safari的媒体查询，通过极短动画触发重绘：

/* 可放在全局样式或组件内联样式中 */
@media not all and (min-resolution:.001dpcm) { 
  @supports (-webkit-appearance:none) {
    .MuiTypography-root {
      -webkit-text-align: justify;
      text-align: justify;
      animation: safari-justify-fix 0.01s forwards;
    }
  }
}

@keyframes safari-justify-fix {
  from { opacity: 0.99; }
  to { opacity: 1; }
}

这个媒体查询是专门匹配Safari的，通过几乎不可感知的动画触发重绘，让对齐样式在初始渲染时就生效。

为什么这些方法有效？ #

本质上都是绕开Safari初始渲染时的样式计算Bug——要么手动触发重排/重绘流程，要么调整CSS属性让浏览器重新识别对齐规则，而且完全不需要修改你从Firestore获取的文本内容，符合你不想替换\n为<br>的需求。

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