Safari-13-textrender-optimizeLegibility-引发拼音输入卡顿

jiezi

5 年前

本文由 Deguang 发表于码路 - 技术博客

问题描述：

作为一个更新强迫症，发布会第二天开心地打开 Mac、检查更新、升级 Safari 13，内心无比舒服。然后噩梦开始了，首先同事反馈：Safari 13 中，输入中文响应延迟、且拼音选字条不跟随光标，影响系统使用；而后客服反馈，客户遇到了同样的问题：其他网站使用正常，但业务系统内输入框状态诡异。

Video 标签无法正常展示，简易跳转原文查看视频，或者接访问 source 链接

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