针对于iosAPP内嵌H5,-webit-overflow-scrolling:touch;产生空白情况

问题描述:一个内嵌IOSAPP的H5页面,长页面,大概1.6个屏幕高度,由于有列表滑动起来很不流畅,所以用了-webit-overflow-scrolling:touch;这个只针对ios端的物理滚动属性来调整,但是滚动流畅实现了,部分区域因为加了这个属性出现滑动白屏情况。原有的html结构也还在就是不显示。

调试过程:最开始把问题定位在空白区域样式问题,包括把overflow全部重置,JS强行展示都没有效果。最后发现引起滚动的长页面有一个盒子没有定义高度,这个高度是由里面的内容撑开的,所以尝试给这个列表盒子定了一个高度,果然在滑动的过程中不再出现空白区域,最后为了适配使用弹性布局,让列表盒子撑满剩下的屏幕,并且内部盒子定义高度。

结论:使用-webit-overflow-scrolling:touch;这种滑动过程中出现白屏的情况,暂时测试出现在小范围滚动的长页面,如果是特别长的数据列表测试是没有出现这个问题。

**tip:**这个属性比较消耗性能,如果对于性能有要求的页面,不是特别长的页面可以用其他方法实现

原文链接:segmentfault.com

上一篇:使用taro完成小程序开发
下一篇:IE10无法识别setPrototypeOf属性问题

相关推荐

  • 项目中引入特殊字体【小程序、h5】包括canvas画图

    请看清楚我虚线下面所有的话。 横线上的废话随便你看不看。 说实话这个字体已经把我折腾的死去活来了一段时间,而且我们项目还经常要画分享图去刷朋友圈,默认字体没办法达到设计的那种效果,查了不少资料,也自己...

    2 年前
  • 重磅重构开源 让H5标签代替C++实时解码播放speex压缩协议的音频文件 【IM的福音】

    这么牛逼的轮子,肯定要美图镇楼 Speex是一套主要针对语音的开源免费,无专利保护的音频压缩格式。 本轮子,适用超大型项目,因为库本身很大,当然本身IM项目就没有小项目吧 Speex(...

    1 年前
  • 那些年踩过的坑——h5页面在ios端点击高亮闪烁

    记得那是第一次独自完成一个项目,现在看来,那个项目会很简单的,但那个时候还是挺有成就感的。 当时碰到过一个问题,h5页面在ios端点击的时候,整个页面会高亮的闪烁一下,特别明显,被测试狂崔。。

    2 年前
  • 转行学前端的第 15 天 : 实现一个H5页面动画

    我是小又又,住在武汉,做了两年新媒体,准备用 6 个月时间转行前端。 今日学习目标 按照昨天的规划,今天这边就需要从实例开始实战了,早上在稿定设计上找了一个模板,今天主要就是将这个h5 邀请函效...

    5 个月前
  • 谷歌开源 H5 流媒体播放器 shaka-player 初探

    Shaka Player is an open-source JavaScript library for adaptive media. It plays adaptive media format...

    3 年前
  • 记录手机端h5页面碰到的一些问题

    关于input光标在手机端偏移 问题根本:不要使用line-height垂直居中。 解决方法:可直接定义height,然后高度由上下padding值撑开。 移动端清除input光标 ios input...

    3 年前
  • 解决h5华为浏览器底部栏兼容问题

    现状 产品需求是做一个带底部吸底支付的支付页面,如下图所示: 但是在部分(大多数)华为系统原生浏览器上会显示如下: 下拉页面,就会发现,是因为华为浏览器下方的工具栏,遮住了支付组件,造成了这个样式兼...

    1 年前
  • 营销H5项目-BugList+解决方案+方法

    动态改变微信title var $body = $('body'); document.title = '五班老同学(35)'; var $iframe = $("<iframe style='...

    3 年前
  • 纯前端15分钟从开发到上线,属于你的H5语音聊天室

    这是一个纯前端Serverless的H5语音聊天室 简介 本文使用的是腾讯云给出的游戏语音解决方案,个人开发者可以免费使用部分功能。 免费的真香2333 本文只使用了H5 SDK,只有最基础的...

    8 个月前
  • 移动端本地 H5 秒开方案探索与实现

    | 导语 企业微信移动端项目中有需求要展示数据趋势的可视化图表,经过调研,最终决定以单页面 H5 来完成,对 APP 里的一些使用 H5 实现的功能模块,一般体验都比原生差,那么怎么提高h5加载速度?...

    2 年前

官方社区

扫码加入 JavaScript 社区