Safari中印地语文本显示异常的原因排查

问题分析与解决 #

可能的原因及对应解决方案 #

1. CSS动画属性干扰文本渲染
   Safari对印地语这类复杂脚本的文本渲染，在元素应用transform、display: inline-block/block等动画相关属性时，容易出现连字断裂、字符错位的问题。

   • 排查：临时移除.word或.w-2类中的transform、overflow: hidden等属性，观察文本是否恢复正常。
   • 解决：
     • 给目标span添加white-space: nowrap，确保印地语文本不被强制拆分。
     • 将动画逻辑转移到父容器，避免直接对文本所在的span应用transform。
     • 尝试添加will-change: transform，提示Safari优化该元素的渲染逻辑。

2. 固定宽度样式挤压文本
   如果.w-2类设置了固定宽度（如width: 2rem），印地语文本的字符组合需要足够空间，固定宽度会导致文本挤压、截断，破坏渲染逻辑。

   • 解决：将.w-2的宽度改为width: auto或min-width: fit-content，让元素自适应文本宽度。

3. JavaScript文本拆分破坏Unicode连字
   若你的动画是通过JS将文本拆分为单个字符/单词的span，印地语存在大量由多个Unicode码点组成的连字（如क्ष由क+ष组合而成），简单的split('')会拆分这些连字，导致Safari无法识别。

   • 解决：使用Intl.Segmenter进行Unicode感知的文本拆分，示例代码：

     const segmenter = new Intl.Segmenter('hi', { granularity: 'grapheme' });
     const segments = Array.from(segmenter.segment(印地语文本));
     // 再根据segments创建span元素
     

额外测试建议 #

• 单独提取异常span，只保留基础样式，逐步添加动画属性，定位具体导致问题的样式。
• 检查Safari版本，旧版本对复杂脚本支持有限，建议更新到最新稳定版。

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