ios滚动列表白屏问题
移动端分页列表,在ios上滚动加载分页时候,使用scrollTop,会引起白屏问题。
看不少文章说是使用了-webkit-overflow-scrolling: touch;引起的硬件加速问题。亲测删除问题仍然存在。
this.$nextTick(() => {
window.scrollTo(0, 1);
window.scrollTo(0, 0);
})
#app {
-webkit-overflow-scrolling: touch;
}
#app > * {
transform: translateZ(0px)
-webkit-transform: translateZ(0px)
}
以上两种方法都试过,不起作用。
将-webkit-overflow-scrolling先设置成auto再设成touch的方案,同样不起作用。
最终使用一个简单粗暴方案解决:
先this.$refs.chat.style = `display: none;`再
this.$refs.chat.style = `display: block;`
this.$refs.chat.scrollTop = 100000;
}, 0)
使整个滚动区域回流,白屏问题解决。
但是这个方案有两个缺点:
一、电脑上会出现明显闪烁的问题,ios上不明显。
二、如果在dom上使用了变量的形式动态配置样式,在display:none;后会失效,需要在display:block;的同时处理。
ios滚动列表白屏问题的更多相关文章
- 微信小程序iOS下拉白屏晃动,坑坑坑
感觉ios的小程序每个页面都可以下拉出现白屏 有时页面带有滑动的属性会跟着晃动,体验不是很好 解决办法: 先禁止页面下拉 <config> { navigationBarTitleText ...
- ionic ios 左滑 白屏
之前发现ionic在发布ios之后,左滑屏幕的时候会出现界面变白,但是画面原有的位置点击还是有效的,但是点击之后界面是不正确的,返回到上上一步 然后查找资料发现是ios系统内置的左滑动作造成了影响,修 ...
- 一次react滚动列表的实践---兼容ios安卓
一.背景 近期项目改版,对原有的h5页面进行了重新设计,数据呈现变成了瀑布流.希望新版兼容ios和安卓两端的情况下,无限制的刷新加载数据.大致效果如下: 整个页面分4部分: 顶部导航 步数状态卡片 用 ...
- ionic ios iframe 白屏
之前碰到一个问题: 在ios下边使用iframe出现白屏问题 android下边正常 原因是ios对app打开外部网页有限制需要取消限制 解决方法 1.确认添加whitelist 插件 2.在conf ...
- ios中iframe页面出现白屏问题
最近用ionic3开发的一个项目在ios中出现了白屏的问题 banner轮播图跳转网页 使用了iframe 但是却时不时的出现白屏现象 在android中一切正常 网上查资料发现 是因为ios不允许访 ...
- iOS使用webView 加载网页,在模拟器中没有问题,而真机却白屏了。App Transport Security has blocked a cleartext HTTP (http://) resource load since it is insecure. Temporary exceptions can be configured via your app's Info.plist f
还在info.plist中配置.除了配置允许上网的配置之外,还有另一项.
- 小程序 ios 10.1.x 白屏问题
遇到这个问题有点莫名其妙只有IOS10.1.x显示白屏 解决过程很坎坷,一开始以为是调试基础库的问题,改成最新的2.9.2版本. 用这个创建新的项目,把之前的项目内容放到新建项目内, 发现还是不行,后 ...
- 提升html5的性能体验系列之一避免切页白屏
窗体切换白屏的现实问题 HTML5的性能比原生差很多,比如切页时白屏.列表滚动不流畅.下拉刷新和上拉翻页卡顿.在低端Android手机上,很多原生App常用的功能和体验效果都很难使用HTML5技术模拟 ...
- 提升HTML5的性能体验系列之一 避免切页白屏
窗体切换白屏的现实问题 HTML5的性能比原生差很多,比如切页时白屏.列表滚动不流畅.下拉刷新和上拉翻页卡顿.在低端Android手机上,很多原生App常用的功能和体验效果都很难使用HTML5技术模拟 ...
- 【js】我们需要无限滚动列表吗?
无限滚动列表,顾名思义,是能够无限滚动的列表(愿意是指那些能够不断缓冲加载新数据的列表的).但是,我们真的需要这样一个列表吗?在PC端,浏览器的性能其实已经能够满足海量dom节点的渲染刷新(笔者经过简 ...
随机推荐
- .NET周刊【6月第4期 2024-06-23】
国内文章 C#.Net筑基-集合知识全解 https://www.cnblogs.com/anding/p/18229596 .Net中提供了数组.列表.字典等多种集合类型,分为泛型和非泛型集合.泛型 ...
- Linux Redis 服务设置开机自启动
@ 目录 前言 一.准备工作 二.操作步骤 2.1 修改redis.conf文件 2.2 创建启动脚本 2.3 设置redis 脚本权限 2.4 设置开机启动 2.5 验证 总结 前言 请各大网友尊重 ...
- NXP i.MX 8M Plus工业核心板硬件说明书( 四核ARM Cortex-A53 + 单核ARM Cortex-M7,主频1.6GHz)
1 硬件资源 创龙科技SOM-TLIMX8MP是一款基于NXP i.MX 8M Plus的四核ARM Cortex-A53 + 单核ARM Cortex-M7异构多核处理器设计的高端 ...
- Vue2 整理(一):基础篇
前言 首先说明:要直接上手简单得很,看官网熟悉大概有哪些东西.怎么用的,然后简单练一下就可以做出程序来了,最多两天,无论Vue2还是Vue3,就都完全可以了,Vue3就是比Vue2多了一些东西而已,所 ...
- [oeasy]python0036_牛说_cowsay_小动物说话_asciiart_figlet_lolcat_管道(祝大家新年快乐~)
牛说(cowsay) 回忆上次内容 上次我们研究了shell脚本的编程 并且在shell中实现了 循环语句 延迟命令 清屏命令 python命令 figlet命令 编辑 还能整点什么呢? 还想 ...
- SQL Server调用OLE对象
T-SQL 中是可以调用 OLE 的,将这一功能应用到触发器.存储过程等对象中,SQL Server 运用变得更贴近我们的功能,更加满足我们的需要. T-SQL 中有七个存储过程是围绕本节内容进行的, ...
- Known框架实战演练——进销存基础数据
本文介绍如何实现进销存管理系统的基础数据模块,基础数据模块包括商品信息.供应商管理和客户管理3个菜单页面.供应商和客户字段相同,因此可共用一个页面组件类. 项目代码:JxcLite 开源地址: htt ...
- [rCore学习笔记 018]实现特权级的切换
写在前面 本随笔是非常菜的菜鸡写的.如有问题请及时提出. 可以联系:1160712160@qq.com GitHhub:https://github.com/WindDevil (目前啥也没有 本节内 ...
- 如何在AS中实现mysql查询并输出在视图上
新建子线程启用mysql new Thread(){ @override public void run(){ //在这里进行数据库调用 } }.start(); handler简单使用方法 hand ...
- Jenkins+docker 部署SpringCloud微服务
部署需要提前准备的环境:安装好Jenkins.docker.Maven.Jdk1.8.Git 说明:由于本例只说明如何部署,所以有关项目其他服务如nacos.mysql.redis.seata等默认已 ...