最近开发iPhone上的富文本编辑器(参考 Rich-Text Editing in Mozilla), 遇到了与-webkit-tab-highlight-color
相关的一些问题, 但未见到过讨论类似问题的文 章, 故撰文总结.
问题
点击编辑器区域(顶级容器是 div[contenteditable=true]
)以编辑内容时, 会出现以下情况:
- iOS 6上出现由内而外扩散的半透明黑框, 扩散完毕后, 黑框消失.
- iOS 7上出现不透明的层遮住内容, 一闪后消失.
- 编辑器中内容较少时,
- 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.
分析以上资料得出:
- iOS 对
link
和clickable的元素默认有tab-highlight特效 - 设置
color
的alpha
值为0
可以禁用tab-highlight特效 - 支持iOS上的Safari (经测试, 亦支持UIWebView)
结合工程中的问题, 可以得出:
- 设置了
contenteditable=true
的元素是clickable的, iOS上默认有tab-highlight特效. - 默认的tab-highlight特效影响性能. 如果在iOS上, WebApp 出现以下情况, 可考虑禁用tab-highlight特效.
- 运行不流畅, 原因莫名.
- 性能要求高.
参考
update 2014-01-15
今天看到一篇相关文章.