20号新推送的IOS13给很多app厂商和RD带来了便秘的感觉,目前复现的问题如下,后续还会持续更新:

1.H5 hybrid输入框导致的页面上移,卡住不动。收起减半后,页面出现半截白屏。(IOS12 + IOS13)

IOS12会在键盘弹出时将页面上推,并压缩body的高度。

IOS13会在键盘弹出时将页面上推,但html,body的高度全部不变。

目前移动端的输入框不外乎一下三种:

(1)原生input

(2)可编辑DIV

(3)自家或他家的富文本编辑器

我司目前使用第二种方案,即可编辑DIV+本地原声虚拟键盘(后续会改为原声H5键盘),可从两个层面解决上述问题。

首先需要在根节点最底部添加一个占位的DIV,并且设置不可见。

<div id="app">
<div v-if="loadingFlag && !timeoutFlag" class="hw-box">
<hw-entrance class="do-entrance"></hw-entrance>
</div>
<!-- IOS13用于兼容处理键盘弹出后页面上拉的问题 -->
<div id="bottomBackToView"></div>
</div>

接下来要添加样式:

#app #bottomBackToView{
display: block;
width: 100%;
height: 0;
opacity: 0;
}

H5层面:通过监听焦点移除设置

oDom.addEventListener('blur', function () {
document.body.scrollTop = 0; // IOS12
document.body.style.height = document.body.clientHeight; // IOS12
backView.scrollIntoView(); // IOS13用于兼容处理键盘弹出后页面上拉的问题
})

上述解决方法在非可编辑DIV的方案中也许时能够解决问题的,但是在Hybrid H5中可编辑DIV还有其他各种兼容性问题,在此,我们的最终解决方案时需要IOS配合解决的,利用IOS监听键盘收起然后做对应的处理:

bridgeClass.jsEventHook.keyboardWillHide = function() {
if (!switchFlag) {
document.body.scrollTop = 0; // IOS12
document.body.style.height = document.body.clientHeight; // IOS12
backView.scrollIntoView(); // IOS13用于兼容处理键盘弹出后页面上拉的问题
}
};

IOS13系统升级带来的H5兼容性问题的更多相关文章

  1. 64位WINDOWS系统环境下应用软件开发的兼容性问题(CPU 注册表 目录)

    应用软件开发的64 位WINDOWS 系统环境兼容性 1. 64 位CPU 硬件 目前的64位CPU分为两类:x64和IA64.x64的全称是x86-64,从名字上也可以看出来它和 x86是兼容的,原 ...

  2. h5+js视频播放器控件

    由于h5兼容性问题,很多浏览器对于插入视频播放的支持都大不相同.火狐支持的比较完整,谷歌则支持的不是很好,很多功能都不能实现,这就需要我们去自制一个播放界面,去兼容不同的浏览器. 只插入一个视频时,浏 ...

  3. VS Build目录下各文件的作用

    VS2010中各种类型文件的作用: .sln 相当于VC6中 .dsw    .vcxproj 相当于VC6中 .dsp    .suo 相当于VC6中 .ncb    .vcxproj.filter ...

  4. 什么是 .manifest 文件

    恩,为了大家都能很方便的理解,我将尽量简单通俗地进行描述. [现象]对这个问题的研究是起源于这么一个现象:当你用VC++2005(或者其它.NET)写程序后,在自己的计算机上能毫无问题地运行,但是当把 ...

  5. UEFI,BIOS,MBR,

    UEFI启动是一种新的主板引导项,正被看做是有近20多年历史的BIOS 的继任者.顾名思义,快速启动是可以提高开机后操作系统的启动速度.由于开机过程中UEFI的介入 第一:安全性更强 UEFI启动需要 ...

  6. 磁盘磁盘MBR与GPT的区别

    基本磁盘与动态磁盘    磁盘的使用方式可以分为两类:一类是“基本磁盘”.基本磁盘非常常见,我们平时使用的磁盘类型基本上都是“基本磁盘”.“基本磁盘”受26个英文字母的限制,也就是说磁盘的盘符只能是2 ...

  7. (转)GPT磁盘与MBR磁盘区别

    摘要:   Windows 2008磁盘管理器中,在磁盘标签处右击鼠标,随磁盘属性的不同会出现“转换到动态磁盘”,“转换到基本磁盘”“转换成GPT磁盘”,“转换成MBR磁盘”等选项,在此做简单介绍.部 ...

  8. MFC应用程序配置不正确解决方案(manifest对依赖的强文件名,WinSxs是windows XP以上版本提供的非托管并行缓存)

    [现象] 对这个问题的研究是起源于这么一个现象:当你用VC++2005(或者其它.NET)写程序后,在自己的计算机上能毫无问题地运行,但是当把此exe文件拷贝到别人电脑上时,便不能运行了,大致的错误提 ...

  9. 企业SOA架构案例分析

    面向服务的架构(SOA)是一个组件模型,它将应用程序的不同功能单元(称为服务)进行拆分,并通过这些服务之间定义良好的接口和契约联系起来.接口是采用中立的方式进行定义的,它应该独立于实现服务的硬件平台. ...

随机推荐

  1. 记忆化搜索模板题---leetcode 1155. 掷骰子的N种方法

    1155. 掷骰子的N种方法 这里有 d 个一样的骰子,每个骰子上都有 f 个面,分别标号为 1, 2, ..., f. 我们约定:掷骰子的得到总点数为各骰子面朝上的数字的总和. 如果需要掷出的总点数 ...

  2. Sqlserver 查询把多行内容拼成一个字符串

    当使用:SELECT ','+Id FROM dbo.Test FOR XML PATH('')); //这样读取的数据虽然是1,2,3,4,但是仍然是xml格式,所以当数据超过2033时候,用sql ...

  3. 记录 Java 的 BlockingQueue 中的一些坑

    最近学习了 BlockingQueue,发现 java 的 BlockingQueue 并不是每一个实现都按照 BlockingQueue 的语意来的,其中有不少坑. 直接上代码吧: 1.关于Prio ...

  4. nginx对特定参数限流

    接到一个需求, 需要对请求(GET)里面的某个参数  的特定的值, 进行限流; 因为不限流的话, 不知道什么时候这个id的请求飙一下, 服务端就被压死了... 就像这样: /index.html?id ...

  5. Linux设备驱动程序学习----3.模块的编译和装载

    模块的编译和装载 更多内容请参考Linux设备驱动程序学习----目录 1. 设置测试系统 第1步,要先从kernel.org的镜像网站上获取一个主线内核,并安装到自己的系统中,因为学习驱动程序的编写 ...

  6. 剖析nsq消息队列(一) 简介及去中心化实现原理

    分布式消息队列nsq,简单易用,去中心化的设计使nsq更健壮,nsq充分利用了go语言的goroutine和channel来实现的消息处理,代码量也不大,读不了多久就没了.后期的文章我会把nsq的源码 ...

  7. 怎样使用U盘安装Windows系统

    准备工作 一个8G及以上的U盘: 软碟通UltraISO,下载地址,非免费,但试用就够了: 系统镜像,推荐去MSDN下载: 安装过程 利用U盘制作启动盘,准备好上述的东西,然后开始制作启动盘: 注意: ...

  8. 防盗链测试01 - Jwplayer+Tengine2.3.1 mp4模块打造流媒体测试服务器

    最近有个想法,想做类似下面的视频URL验证: 1.URL Tag Validation 2.Special format of URL for preventing unauthorized usag ...

  9. LR模型常见问题

    信息速览 基础知识介绍-广义线性回归 逻辑斯蒂回归模型推导 逻辑斯蒂回归常见问题 补充知识信息点 基础知识: 机器学习对结果的形式分类: 分类算法 回归算法 LR:logistic regressio ...

  10. cogs 1377. [NOI2011] NOI嘉年华 (dp

    题意:给你n个活动的起止时间,要你从中选一些活动在2个会场安排(不能有两个活动在两个会场同时进行),使活动较少的会场活动数最大,以及在某个活动必须选择的前提下,求该答案. 思路:由于n很小,时间很大, ...