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

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

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

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

针对于iosAPP内嵌H5，-webit-overflow-scrolling:touch;产生空白情况的更多相关文章

  1. 微信小程序中使用 <web-view> 内嵌 H5 时，登录问题的处理方法

    在微信小程序的开发中,经常遇到需要使用 <web-view></web-view> 内嵌 H5 的需求.在这种需求中比较棘手的问题应该就是登录状态的判断了,小程序中的登录状态怎 ...

  2. 安卓内嵌H5只展示部分静态页面

    问题: 安卓内嵌H5在华为P9部分机型只展示h5静态页面无法展示接口返回渲染的页面 解决办法: Android  关闭硬件加速   android:hardwareAccelerated=" ...

  3. ios应用内嵌h5页面数据自动变色识别为手机号码的解决方法——手机号码拨号禁用IOS手机页面数字自动识别为手机号

    异常如下: ios应用内嵌h5页面,本来是设置了白色的数字,两三秒之后会自动变为黑色,然后点击的时候就会弹出是否拨号的提示: 解决方法: 添加如下meta标签,即可解决: <meta name= ...

  4. APP中内嵌H5页面为什么不能下载？

    在APP中内嵌H5页面,若页面上存在下载链接,没有任何反应,为什么呢? 原因是app中内嵌的H5页面是WebView解析的,什么是WebView呢? 在Android手机中内置了一款高性能webkit ...

  5. 小程序内嵌H5——判断小程序环境的坑

    现在各种小程序风靡,这边H5的需求还没有搞定,产品又要求做小程序版本,做可以,关键是618前上线,我-- whatever,618要做推广,日期订了,剩下的就只能是排期,定方案,尽可能完成. 最后和产 ...

  6. android内嵌H5页（webview）如何定位

    一.切换至webview后再定位元素 (1)获取页面上下文 contexts = driver.contexts (2)切换至webview driver.switch_to.context(cont ...

  7. appium常见问题02_android内嵌H5页（webview）如何定位

    现在大多数app都是由原生页面和内嵌H5(即webview)组成,app原生页面直接定位即可,那内嵌H5页面要如何定位呢. 相信大多数人用appium做自动化时都有遇到这个问题,小编总结了下工作中该问 ...

  8. 小程序中webview内嵌h5页面

    小程序内嵌h5页面跳转小程序指定页面,  需要引用  JSSDK:   <script src="https://res.wx.qq.com/open/js/jweixin-1.3.2 ...

  9. 小程序通过 url 向内嵌 H5 传参注意事项

    当在小程序中通过 url 向 <web-view> 内嵌的 H5 传参时,当包含特殊字符时需要进行编码处理(不然 <web-view> 中是拿不到值的,小程序竟然没有错误提示. ...

随机推荐

  1. Atcoder 229

    Atcoder 229 \(D.\)Longest X 题意 给定一个长度为\(N\)的字符串\(S\),\(S\)中包含$\ .\ \(和\)\ X\ \(两种字符,现在你可以将其中\)K\(个\) ...

  2. Qt：QCustomPlot使用教程（三）——用户交互

    0.说明 本节翻译总结自:Qt Plotting Widget QCustomPlot - User Interactions 本节内容是使用QCustomPlot实现绘图和用户交互功能. 本文代码中 ...

  3. ROS入门介绍

    1.ROS版本介绍 ROS版本:(已经推出数十个版本) 2013 ------> Hydro 2014 ------> Indigo (对应Ubuntu14.04) (现在已经基本废弃) ...

  4. SP3734题解

    题意: 有 \(n\) 列表格,第 \(i\) 列有 \(a_i\) 个格子,问在 \(n\) 列表格中有多少种放置 \(k\) 个棋子的方法使没有棋子在同一列和同一行.(如果中间有一个"格 ...

  5. LCD1602----LiquidCrystal库的使用1

    一:硬件介绍: 1.引脚定义: 2.屏幕介绍: 1602液晶也叫1602字符型液晶,它是一种专门用来显示字母.数字.符号的点阵型液晶模块.它是由若干个5x7或者5x10的点阵字符位组成,每个点阵字符位 ...

  6. WPF中Enter 焦点转移方法

    1.Set the TabIndex="16"2. private void detailGrid_Keydown(object sender, KeyEventArgs e) { ...

  7. BUU [GKCTF 2021]签到

    BUU [GKCTF 2021]签到 1.题目概述 2.解题过程 追踪HTTP流 在下面发现了一串可疑字符 Base16转base64 放到010里看看 复制下来,去转字符 好像不是,再回去找找其他的 ...

  8. 从MyIE2平滑升级到Maxthon的完美方案

    经过几个Beta版本的测试MyIE2改名为Maxthon的新版浏览器终于发布了正式版本.喜欢MyIE2的朋友们也可以放心的将你的MyIE2升级为Maxthon了.以下是MyIE2平滑过渡到Mathxo ...

  9. 域环境SID相同如何解决

    查看SID 进入命令行(WIN+R) 输入     whoami /user 什么是SID? sid相当于系统的身份证号,在域内有相同sid的计算机就相当于两个人共同有一个身份证号码,后果可想而知 建 ...

  10. [SPDK/NVMe存储技术分析]003 - NVMeDirect论文

    说明: 之所以要翻译这篇论文,是因为参考此论文可以很好地理解SPDK/NVMe的设计思想. NVMeDirect: A User-space I/O Framework for Application ...