最近開發iPhone上的富文本編輯器(參考 Rich-Text Editing in Mozilla), 遇到了與-webkit-tab-highlight-color相關的一些問題, 但未見到過討論類似問題的文章, 故撰文總結.

問題

點擊編輯器區域(頂級容器是 div[contenteditable=true] )以編輯內容時, 會出現以下情況:

1. iOS 6上出現由內而外擴散的半透明黑框, 擴散完畢後, 黑框消失.
2. iOS 7上出現不透明的層遮住內容, 一閃後消失.
3. 編輯器中內容較少時,
   • iOS 7 & iPhone 4上, 鍵盤要2秒左右才能彈起, 等待時間過長, 卡, 性能不好.
   • iOS 7 & iPhone 5/5S上, 鍵盤彈出雖然慢, 但不影響用戶體驗
   • 當編輯器中內容較多, 超過一屏時, 鍵盤彈出正常, 快速.

     解決問題

     由於:

     • 不確定是編輯器(前端方面)的問題還是Native的問題. UIWebView中嵌入極簡編輯器(html文件, body設置contenteditable=true)也有以上問題.
     • 以桌面端開發經驗, 遇到很多bug, 但未遇到這類詭異的問題
     • Google一下, 未找到有啟發的資料

       於是, 將問題交與iOS開發工程師, 但亦不能解決. 問題只好掛起, 藏心中.

       後來在處理鏈接的點擊特效, 心中忽然靈機一動:

       • 第1個問題會不會與鏈接的點擊特效類似?

         使用-webkit-tab-highlight-color: rgba(0, 0, 0, 0); 一試, 不但解決了第1, 2個問 題, 而且解決了第3個問題.

         分析與總結

         先查了一下-webkit-tab-highlight-color的官方文檔 Safari CSS Reference, 有以下描述:

         -webkit-tap-highlight-color

         Overrides the highlight color shown when the user taps a link or a JavaScript clickable element in Safari on iOS.

         Syntax

         -webkit-tap-highlight-color: color;

         Parameters

         color

         The tapped link color.

         Discussion

         This property obeys the alpha value, if specified. If you don’t specify an alpha value, Safari on iOS applies a default alpha value to the color. To disable tap highlighting, set the alpha value to 0 (invisible). If you set the alpha value to 1.0 (opaque), the element is not visible when tapped.

         Availability

         Available in iOS 1.1.1 and later.

         Support Level

         Apple extension—Safari on iOS only.

         分析以上資料得出:

         1. iOS 對link和clickable的元素默認有tab-highlight特效
         2. 設置color的alpha值為0可以禁用tab-highlight特效
         3. 支持iOS上的Safari (經測試, 亦支持UIWebView)

            結合工程中的問題, 可以得出:

            1. 設置了contenteditable=true的元素是clickable的, iOS上默認有tab-highlight特效.
            2. 默認的tab-highlight特效影響性能. 如果在iOS上, WebApp 出現以下情況, 可考慮禁用tab-highlight特效.
               • 運行不流暢, 原因莫名.
               • 性能要求高.

                 參考

                 1. Rich-Text Editing in Mozilla | MDN
                 2. Safari CSS Reference
                 3. CSS property: -webkit-tap-highlight-color