Safari 13 text-render: optimizeLegibility 引发拼音输入卡顿

本文由 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 进行中文输入时，产生意想不到的异常卡顿。