ios系统web（微信公众号）开发遇到的问题及解决方案

1.1. 页面滚动不流畅（2017-09-25）

现象：

网页竖向滚动或横向滚动不流畅。

解决方案：

为滚动元素添加css样式：

-webkit-overflow-scrolling: touch;

详见MDN-webkit-overflow-scrolling

1.2. 横向滚动时会上下跳动（2017-10-10）

现象：

横向滚动区域，滑动时，会上下跳动。

解决方案：

为滚动元素添加css样式：

overflow-x: scroll;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;

2. 点击页面的时候网页闪烁（高亮）（2017-09-25）

现象：

点击页面输入框的时候，网页上半部分闪一下（高亮），体验不好。

解决方案：

-webkit-tap-highlight-color: rgba(0,0,0,0);

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

致谢

fredshare-移动端前端常见bug及解决方案

联系我

如果您有更好的解决方案，或者

您有任何疑问或本文侵犯了您的著作权，请联系我。 mail to kylin