怎么管理网站,网上机械加工厂,wordpress注册设置,wordpress新建php页面目录
1、iOS端列表页面屏幕滑动滞涩感强烈
2、iOS端的按钮以及添加的边框和倒角属性失效问题
3、iOS错误识别页面时间为 a 标签
4、iOS端调起软键盘界面布局走位问题
5、iOS端滚动条部分滚动样式不生效问题 背景 #xff1a;
在开发移动端H5项目的过程中#xff0c;遇到…目录
1、iOS端列表页面屏幕滑动滞涩感强烈
2、iOS端的按钮以及添加的边框和倒角属性失效问题
3、iOS错误识别页面时间为 a 标签
4、iOS端调起软键盘界面布局走位问题
5、iOS端滚动条部分滚动样式不生效问题 背景
在开发移动端H5项目的过程中遇到了各种“ 匪夷所思 ”的奇葩兼容性问题 大致就是在安卓手机上面显示好好的、在浏览器模拟器上面看也是没有任何问题的但就是在iOS上面看样式啥的就各种状态百出呈现不出想要的样子来。。。
So特此记录一下遇到的问题加深印象也方便后续少踩坑。 1、iOS端列表页面屏幕滑动滞涩感强烈
就是在安卓手机上面滑动屏幕会一直滑动然后慢慢停止滚动但是在iOS端滑动屏幕手指离开屏幕它就会停止滚动了就是滑一下滚动一下显得很卡顿、滞涩的感觉。
解决方案 添加一个 css 属性 -webkit-overflow-scrolling
.list {height: 100%;overflow-y: auto;-webkit-overflow-scrolling: touch;// 添加此属性以解决滑动滞涩问题
}
注意此样式可能会影响你页面使用的 “ position 定位功能 ”尤其是 position: fixed; 固定定位。 2、iOS端的按钮以及添加的边框和倒角属性失效问题
在 iOS 端设置了 border-radius 属性的元素展示会有问题
border: 1px solid gray;
border-radius: 10px; 在 iOS 端展示不出来
想当初最开始没有找到解决方案时直接把项目里所有带有 border-radius 属性的都注释了。治标不治本
解决方案 添加一个 css 属性 will-change
.van-button--round {border: 1px solid gray;border-radius: 10px;will-change: transform;// 添加此属性以解决边框不展示问题
}
如若是加了 will-change: transform; 还不生效的话再加一行样式代码
transform: matrix3d(0, 0, 0); 3、iOS错误识别页面时间为 a 标签
页面展示内容为 2024-06-01 12:00 2024-06-05 12:00
iOS会自动将 2024-06-05 错误识别成为一个可点击跳转到发送信息界面的 a 标签。
解决方案 取消 a 标签的可点击效果调整其标签颜色样式
a {// 取消a标签点击效果并更改其样式text-decoration: none;pointer-events: none;color: #474747;
} 4、iOS端调起软键盘界面布局走位问题
详情请见
项目难点解决IOS调起软键盘之后页面样式布局错乱问题_h5 ios键盘弹出 布局上移 5、iOS端滚动条部分滚动样式不生效问题
详情请见
记录解决IOS滚动跳转不生效问题_苹果scrollto方法不生效 6、 持续记录更新、收藏不迷路哦
