漫说前端 [ The road to be a better programmer. ]

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

问题描述:

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

更新到 Safari 13 的同学可以测试下:https://jsfiddle.net/Deguang/jq1k3nf0/

问题定位:

如何定位问题的呢?这次问题发生的时间前后,系统业务不存在大版本更新、基础架构稳定无变动,其他版本 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 进行中文输入时,产生意想不到的异常卡顿。

作者:Deguang
创建时间:2019-09-27
修改时间:2019-10-05