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节点的渲染刷新(笔者经过简 ...
随机推荐
- 初识python day1记录
程序语言中的分类 在程序中有分为高级语言Java python go与低级语言C 汇编,每种语言都有自己的规则,但是最终目的都是给计算机识别的,所以他的底层肯定是一些二进制010101,像java/p ...
- .NET 高效灵活的API速率限制解决方案
前言 FireflySoft.RateLimit是基于.NET Core和.NET Standard构建,支持多种速率限制算法和策略,包括固定窗口.滑动窗口.漏桶.令牌桶等.通过简单的配置和集成,开发 ...
- 如何设置 QEMU 输出到控制台并使用 Shell 脚本自动化
如何设置 QEMU 输出到控制台并使用 Shell 脚本自动化 原文:How to Setup QEMU Output to Console and Automate Using Shell Scri ...
- 一款利用人工智能将自然语言查询转换为 SQL 代码的互译工具 - SQL Translator
前言 对于后端程序员来说,编写SQL代码是日常工作中不可或缺的一部分.然而,随着数据复杂性的增加,如何高效.准确地编写SQL查询成为了新的挑战.幸运的是,SQL Translator的出现为后端程序员 ...
- 3568F-视频开发案例
- JavaWeb踩坑记录
org.apache.ibatis.binding.BindingException: Parameter 'XXXX' not found. 或 There is no getter for pro ...
- oeasy教您玩转vim - 55 - # 参数替换
[Github地址] (https://github.com/overmind1980/oeasyvim) [Gitee地址] (overmind1980/oeasyvim) [蓝桥实验楼 邀请码 ...
- 2024 暑假友谊赛-热身2 (7.12)zhaosang
E-E https://vjudge.net/problem/AtCoder-diverta2019_b 给你 a, b, c ,n就是问你有多少(ia+jb+k*c)等于n的答案i,j,k任意几个都 ...
- 配置docker镜像时碰到的问题
在配置docker镜像时,首先我是这样操作的 , echo "registry-mirrors": ["https://ry1ei7ga.mirror.aliyuncs. ...
- 🚀RabbitMQ+redis+Redisson分布式锁+seata实现订单服务
引言 订单服务涉及许多方面,分布式事务,分布式锁,例如订单超时未支付要取消订单,订单如何防止重复提交,如何防止超卖.这里都会使用到. 开启分布式事务可以保证跨多个服务的数据操作的一致性和完整性, 使用 ...