共计 1345 个字符，预计需要花费 4 分钟才能阅读完成。
本文由 Deguang 发表于 码路 - 技术博客
问题描述：
作为一个更新强迫症，发布会第二天开心地打开 Mac、检查更新、升级 Safari 13，内心无比舒服。然后噩梦开始了，首先同事反馈：Safari 13 中，输入中文响应延迟、且拼音选字条不跟随光标，影响系统使用；而后客服反馈，客户遇到了同样的问题：其他网站使用正常，但业务系统内输入框状态诡异。
Video 标签无法正常展示，简易跳转原文查看视频，或者接访问 source 链接
<video id=”video” width=”100%” controls=””>
<source src=”https://res.cloudinary.com/de…; type=”video/webm”>
<source src=”https://res.cloudinary.com/de…; type=”video/mp4″>
<source src=”https://res.cloudinary.com/de…; type=”video/mov”>
</video>
更新到 Safari 13 的同学可以测试下：https://jsfiddle.net/Deguang/…
问题定位：
如何定位问题的呢？这次问题发生的时间前后，系统业务不存在大版本更新、基础架构稳定无变动，其他版本 safari（<= 12）无法复现问题，基本断定为 Safari 更新导致问题，但不明确问题所在以及修复方法。
系统基本框架（2 个工程）：Vue 2 + Element-UI 1 / 2 + Webpack + Babel
猜测可能原因
1. Element-UI input 组件实现问题；
2. 构建方法中是否存在不兼容 API；
3. 业务中是否存在方法对全局 Input 进行事件绑定引发副作用；
定位问题才用了简单粗暴的方式，注释代码，从业务代码排查到构建配置。
1. 首先，对 Vue 入口文件进行注释，构建简单 Template 仅包含一个原生 Input 进行替代排错，问题依旧；
2. 将构建配置中的非核心配置移除，问题依旧；
此时项目代码仅存在一个简单结构，问题依旧存在，入口 Vue 文件中仅剩 css reset 和 一个原生 input 标签，怀着试一试的心态移除了 css reset 文件，问题解决，input 输入恢复正常。
问题聚焦到 reset.css 文件，其中是一些基础性的样式覆盖、浏览器统一等声明，首先对 input 相关的内容进行隔离，排除影响；这时注意到一段样式：
body {
color: #555555;
font-family: 'HanHei SC', 'PingFang SC',"Microsoft YaHei" ;
font-size: 14px;
direction: ltr;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-rendering: optimizelegibility;
position: relative;
} 将 text-rendering: optimizelegibility; 移除后，天空一片晴朗 ～。～
MDN 文档 text-render 兼容性结果显示 safari 5.0 + 对 optimizelegibility 属性无特殊支持，但却在 Safari 13 进行中文输入时，产生意想不到的异常卡顿。
