问题描述：一个内嵌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. 浅谈cache

    2021.9.22更新: <浅谈Cache Memory> http://blog.sina.com.cn/s/blog_6472c4cc0102dusv.html 为什么贴上这个链接呢, ...

  2. Element-UI tree 组件 点击后高亮显示的样式修改(背景色)

    感觉默认的高亮背景色颜色太浅,修改一下: .el-tree-node:focus > .el-tree-node__content { background-color: #ccc !impor ...

  3. C#实现抢红包算法

    二倍均值法(公平版) 发出一个固定金额的红包,由若干个人来抢,需要满足哪些规则? 1.所有人抢到金额之和等于红包金额,不能超过,也不能少于. 2.每个人至少抢到一分钱. 3.要保证所有人抢到金额的几率 ...

  4. TCC分布式事框架务详解

    之前网上看到很多写分布式事务的文章,不过大多都是将分布式事务各种技术方案简单介绍一下.很多朋友看了还是不知道分布式事务到底怎么回事,在项目里到底如何使用. 所以这篇文章,就用大白话+手工绘图,并结合一 ...

  5. 微信小程序结合laravel完成签到功能

    前端样式未做处理,可将后端数据传至前端进行处理 1.wxml页面 <!--pages/signIn/signIn.wxml--> <view class='signIn'> & ...

  6. Linux安装JDK8环境

    1.下载JDK包 点击同意下载后,会让你注册oracel账号,登录了才能下载 2.上传到linux服务器,然后解压 解压命令(注意jdk的版本名称不一定相同): tar -zxvf jdk-8u181 ...

  7. 分布式 PostgreSQL 集群(Citus)，分布式表中的分布列选择最佳实践

    确定应用程序类型 在 Citus 集群上运行高效查询要求数据在机器之间正确分布.这因应用程序类型及其查询模式而异. 大致上有两种应用程序在 Citus 上运行良好.数据建模的第一步是确定哪些应用程序类 ...

  8. Java8 中的流式数据处理

    java8的流式处理极大了简化我们对于集合.数组等结构的操作,让我们可以以函数式的思想去操作,本篇文章将探讨java8的流式数据处理的基本使用. 一. 流式处理简介 在我接触到java8流式处理的时候 ...

  9. SpringCloud-Consul

    1. Consul 简介 Consul是 HashiCorp 公司推出的开源工具,用于实现分布式系统的服务发现与配置.与其它分布式服 务注册与发现的方案,Consul 的方案更"一站式&qu ...

  10. nginx配置限制同一个ip的访问频率方法

    1.在nginx.conf里的http{}里加上如下代码: limit_conn_zone $binary_remote_addr zone=perip:10m;   limit_conn_zone ...