问题描述：一个内嵌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. WPS二级标题链接到一级标题

    WPS二级标题链接到一级标题,即2后出现2.1 2.2而不是1.3 1.4什么的 样式中的编号什么的都不用动,默认即可,关键在于这些多级标题是否选择了同一个编号方式 WPS中,只需要将它们的编号选择为 ...

  2. c# 窗口不显示标题栏及周围有/无边框的设置

    一 : 不显示标题栏也无边框: 方法1:属性里直接设置 方法2:手写代码(两种效果一样) this.FormBorderStyle = FormBorderStyle.None; 二 : 不显示标题栏 ...

  3. UML类图的补充及软件设计原则

    UML类图的补充及软件设计原则 UML 从目标系统的不同角度出发,定义了用例图.类图.对象图.状态图.活动图.时序图.协作图.构件图.部署图等 9 种图. 1.uml补充 统一建模语言(Unified ...

  4. Spring框架第一天(搭建项目)

    Spring框架 1.简介 1.1 Spring是什么 一个开源的框架,是JavaEE开源框架 Spring是分层的 Java SE/EE应用 full-stack 轻量级开源框架,以IoC(Inve ...

  5. LeetCode-011-盛最多水的容器

    盛最多水的容器 题目描述:给你 n 个非负整数 a1,a2,...,an,每个数代表坐标中的一个点 (i, ai) .在坐标内画 n 条垂直线,垂直线 i 的两个端点分别为 (i, ai) 和 (i, ...

  6. laravel8安装步骤

    网址: https://learnku.com/docs/laravel/8.x/installation/9354 安装: # 安装laravel composer create-project - ...

  7. MySQL Performance Schema详解

    MySQL的performance schema 用于监控MySQL server在一个较低级别的运行过程中的资源消耗.资源等待等情况. 1 performance schema特点 提供了一种在数据 ...

  8. CF1515H口胡

    居然一下就做出来了...不知道是不是对的/fad 考虑操作的本质,首先将所有元素插入线段树中. 来依次考虑每一种操作: 区间与 注意到这个操作类似将某些节点的右儿子合并到左儿子上,而一个节点最多被合并 ...

  9. huawei 华为 ubuntu mysql 访问不了的原因

    标签:服务器   ins   查看   tar   安全组   service 一. 首先将3306端口添加至安全组, 确保端口没有被封掉 二. 开启服务器上的mysql 权限, 步骤如下 1.mys ...

  10. 硬吃一个P0故障，「在线业务」应该如何调优HBase参数？

    1.背景 由于种种原因,最近将核心业务生产使用的HBase迁移到了云上的弹性MapReduce(EMR)集群上,并使用了EMR的HBase组件默认参数配置. 结果在流量高峰期出现了宿主机故障,挂掉了两 ...