兄弟，我刚好之前也碰到过类似的文本渲染对齐问题，结合你描述的情况，给你梳理下可能的原因和解决方案：

首先，你观察到的新旧系统/Chrome版本差异，大概率是字体渲染引擎的细微调整导致的——新macOS 13.4对中文排版做了优化，而Chrome 113+可能针对表单控件（比如textarea）和普通div元素用了不同的渲染路径，哪怕样式看起来完全一致，底层的字符间距计算还是会有偏差。

针对你克隆样式的代码，我建议补充几个容易被忽略的关键属性，这些属性直接影响文本宽度的计算：

// 新增字体特性相关属性，这是中文排版差异的重灾区
div.style.fontVariantLigatures = inputStyle.fontVariantLigatures;
div.style.fontFeatureSettings = inputStyle.fontFeatureSettings;
div.style.webkitFontVariantLigatures = inputStyle.webkitFontVariantLigatures;
// 统一文本缩放规则
div.style.webkitTextSizeAdjust = inputStyle.webkitTextSizeAdjust;
// 强制使用几何精度渲染，避免浏览器自动优化导致的间距差异
div.style.textRendering = 'geometricPrecision';

另外，还有几个小细节可以试试：

• 明确指定字体：有时候textarea会默认使用系统的“表单控件专用字体”，你可以直接把div的fontFamily设为和textarea完全一致的具体字体（比如'PingFang SC', sans-serif），避免浏览器 fallback 到不同的字体变种
• 检查word-break属性：虽然你设置了overflowWrap，但word-break对中文换行的影响也很大，确保两者的word-break值完全一致
• 尝试禁用浏览器的文本优化：给div加上-webkit-font-smoothing: subpixel-antialiased（和textarea保持一致），部分情况下能减少渲染差异

如果以上调整还是没解决，还有个兜底方案：不要直接克隆整个文本到div，而是用Range对象逐行读取textarea的文本位置，再在div里对应位置生成高亮。不过这个方案复杂度高一些，适合极端场景。

最后补充下，你提到的VS Code和旧版Chrome没问题，正好印证了是新系统+新Chrome的渲染逻辑变化导致的，表单控件和普通元素的文本渲染本来就存在隐性差异，只能通过覆盖尽可能多的样式属性来缩小这种差距。

备注：内容来源于stack exchange，提问作者Michael Buen