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 進行中文輸入時，產生意想不到的異常卡頓。