1.1. 页面滚动不流畅(2017-09-25)
现象:
网页竖向滚动或横向滚动不流畅。
解决方案:
为滚动元素添加css样式:
-webkit-overflow-scrolling: touch;
- 1
详见MDN-webkit-overflow-scrolling
1.2. 横向滚动时会上下跳动(2017-10-10)
现象:
横向滚动区域,滑动时,会上下跳动。
解决方案:
为滚动元素添加css样式:
overflow-x: scroll;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
- 1
- 2
- 3
2. 点击页面的时候网页闪烁(高亮)(2017-09-25)
现象:
点击页面输入框的时候,网页上半部分闪一下(高亮),体验不好。
解决方案:
-webkit-tap-highlight-color: rgba(0,0,0,0);
- 1
3. position:absolute元素在页面上看不到了(或absolute元素展示偏右)(2017-09-25)
现象:
某元素设置position:absolute,其他浏览器显示正常,ios和Safari浏览器却看不到该元素(或该元素在页面上比较偏右)。
解决方案:
设置left:xxx;即可。
4. ios下,iframe页面中的position:fixed定位错误(2017-09-19)
现象:
iOS,iframe中的fixed定位的元素并没有显示在屏幕的固定位置,而是会随着页面的滑动而滑动。
解决方案:
对滚动部分设置高度。
详见该文章:ios下,iframe页面中的position:fixed定位布局错误
5.1. ios下,click有300ms的延迟,click事件无响应(2017-09-25)
现象:
iframe中的网页,点击事件经常无响应。
解决方案:
使用fastclick插件。
5.2. fastclick插件对输入框(contenteditable)不友善,光标无法移动(2017-09-25)
现象:
使用fastclick后,点击某行文本,可以编辑,但是光标停留在输入框最前面,无法移动光标位置。
解决方案:
为编辑元素添加needsclick样式类。
5.3. 添加fastclick插件后,编辑屏幕下半部分的文本,网页没有自动向上移动(2017-09-25)
现象:
正常情况下,点击下半部分的输入框,在ios系统中,网页会自动向上滑动,使输入框暴露在屏幕的*,方便编辑,但是添加fastclick插件之后,网页经常不再向上移动了。
解决方案: 暂未解决,求大神解答。
为编辑元素及所有后代元素添加needsclick类。(2017-10-10)
5.4. fastclick对编辑不友善(2017-09-25)
现象:
1. contenteditable的子元素仍有div标签的情况下,光标经常不能*移动。
2. 点击contenteditable的元素,页面经常上下震动。
3. 点击编辑屏幕下半部分的文本时,页面不能自动向上移动。
解决方案: 部分页面不再使用fastclick,改为使用贺师俊大神的Zhi库。
但仍未解决第三点的问题。
为编辑元素及所有后代元素添加needsclick类。(2017-10-10)
6. ios输入汉字时出现空格(2017-09-11)
现象:
iOS在输入汉语时,输入多个汉字,在拼音的中间出现了空格。导致正则表达式判断输入不合法,用户输入*中止。
解决方案:
使用\s判断空格,认为空格是合法的。
详见该文章ios输入汉字时出现空格
7. iOS输入汉字时,最后选择汉字并没有触发keyup(keydown)事件(2017-10-13)
现象:
input输入框监听用户输入,iOS用户在输入结束后,点击候选汉字时,没有触发keyup(keydown)事件,导致最后的输入无法处理。
解决方案:
使用input事件处理。input事件可以处理点击候选汉字的操作。
input的简单介绍MDN-oninput
致谢
联系我
如果您有更好的解决方案,或者
您有任何疑问或本文侵犯了您的著作权,请联系我。 mail to kylin