iPhone上tab-highlight特效导致的问题与解决

最近开发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

update 2014-01-15

今天看到一篇相关文章.

• Removing tap-delay from iOS WebViews