问题描述：一个内嵌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. Lua中如何实现类似gdb的断点调试--01最小实现

    说到Lua代码调试,最常用的方法应该就是加一堆print进行打印.print大法虽好,但其缺点也是显而易见的.比如效率低下,需要修改原有函数内部代码,在每个需要的地方添加print语句,运行一次只能获 ...

  2. QT：Qt Creator使用CTRL+C后变成了光标覆盖，插入模式

    菜单栏→工具→选项→FakeVim→取消勾选"使用FakeVim"

  3. 正则表达式（二）——Python中的相关方法

    正则函数 match.search.findall.finditer.split.sub 返回一个对象:match.search.finditer 返回一个列表:findall.split 其中mat ...

  4. composer.json和composer.lock到底是什么以及区别？

    composer方文档:https://docs.phpcomposer.com/04-schema.html我们在做项目的时候,总是要安装一些依赖.composer给我们提供了很多方便.直接运行co ...

  5. tensorflow源码解析之common_runtime-device

    目录 核心概念 device device_factory device_mgr device_set 1. 核心概念 在framework部分,我们介绍了DeviceAttributes和Devic ...

  6. 理解HMM算法

    长这样: 理解的前提: (1)状态:生成观测值的变量(上图中的"吃"和"睡"). (2)观测值:状态乘上输出概率对应的输出(上图中的橙色节点). (3)输出概率 ...

  7. python 生产数据表脚本

    # -*- coding: utf-8 -*-import re"""建立相关表的字段从源表创建指定的MySQL建表脚本"""# 目标表名称 ...

  8. Java基础—字符串的比较

    1."=="方法进行比较时有以下两种情况: 基础数据类型:比较的是数据值是否相同 引用类型:比较的是地址值是否相同 字符串是对象,它比较内容是通过一个方法实现的,equals() ...

  9. VS Code Java 3月更新｜代码补全、Maven 以及 Java 插件预览版本新升级！

    Nick Zhu Senior Program Manager, Developer Division at Microsoft 大家好,欢迎来到 Visual Studio Code Java 的 ...

  10. 【Vulnhub练习】Acid

    靶机信息 下载链接 https://download.vulnhub.com/acid/Acid.rar 靶机说明 Welcome to the world of Acid. Fairy tails ...