HybridApp开发兼容避坑手册--ios端不支持position:fixed的解决方法

写在前面: 目前团队的项目是开发一个HybridApp混合app,这样做的好处是只需一个前端就能完成一个App移动端多处终端(安卓,ios,pad,微信等)内容的开发,生了很多人力物力,但是在开发的过程中发现ios端对某些html,css和js属性会有兼容问题,当遇到这些问题并且解决后,就来简书写一些博客来总结这些问题,也希望对遇到同样问题的同学有所帮助

问题描述:position:fixed在android2.2以下(不包含2.2),ios是无效的,而position:absolute是没有问题的,如果用动画去解决,使用到css的transform的话,input,select等编辑框不会移动,还是在原来的位置上,所以建议在写移动端的时候想要固定某个div避免使用position:fixed属性,如果想要用动画去模拟也要注意css3新属性兼容问题,所以建议这时使用position:absolute属性去模拟固定某个div。

解决方案:

image.png

固定图中红色方框时间选择器,只需写一下几行css即可:

.calendar-choice {
     width: 100%;
    position: absolute;
    overflow-y: auto;
    z-index: 9999999;
    -webkit-overflow-scrolling: touch;
}

其实这里z-index属性起到比较关键的左右,当使用 position: absolute固定div是不要忘了加上z-index属性

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,706评论 1 92
  • <a name='html'>HTML</a> Doctype作用?标准模式与兼容模式各有什么区别? (1)、<...
    clark124阅读 9,059评论 1 19
  • 我叫曹冲,尽管我才华横溢,却天妒英才,英年早逝。 但,人们记得最深刻的,却是,我那历史上鼎鼎大名的当宰相的老爸。你...
    绛侯阅读 19,505评论 1 8
  • 从图表中可以清晰看出广东省办公楼销售面积增长最多,整体来看反映出东部地区办公楼销售面积增长是要远远大于中西部的。@启图
    流离琉璃阅读 2,958评论 0 0
  • lldb打印页面层级结构:po [UIApplication sharedApplication].keyWind...
    KeepFighting阅读 1,801评论 0 0

友情链接更多精彩内容