移动端分页列表,在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;`再

setTimeout(() => {
    this.$refs.chat.style = `display: block;`
    this.$refs.chat.scrollTop = 100000;
}, 0)

使整个滚动区域回流,白屏问题解决。

但是这个方案有两个缺点:

一、电脑上会出现明显闪烁的问题,ios上不明显。

二、如果在dom上使用了变量的形式动态配置样式,在display:none;后会失效,需要在display:block;的同时处理。

ios滚动列表白屏问题的更多相关文章

  1. 微信小程序iOS下拉白屏晃动,坑坑坑

    感觉ios的小程序每个页面都可以下拉出现白屏 有时页面带有滑动的属性会跟着晃动,体验不是很好 解决办法: 先禁止页面下拉 <config> { navigationBarTitleText ...

  2. ionic ios 左滑 白屏

    之前发现ionic在发布ios之后,左滑屏幕的时候会出现界面变白,但是画面原有的位置点击还是有效的,但是点击之后界面是不正确的,返回到上上一步 然后查找资料发现是ios系统内置的左滑动作造成了影响,修 ...

  3. 一次react滚动列表的实践---兼容ios安卓

    一.背景 近期项目改版,对原有的h5页面进行了重新设计,数据呈现变成了瀑布流.希望新版兼容ios和安卓两端的情况下,无限制的刷新加载数据.大致效果如下: 整个页面分4部分: 顶部导航 步数状态卡片 用 ...

  4. ionic ios iframe 白屏

    之前碰到一个问题: 在ios下边使用iframe出现白屏问题 android下边正常 原因是ios对app打开外部网页有限制需要取消限制 解决方法 1.确认添加whitelist 插件 2.在conf ...

  5. ios中iframe页面出现白屏问题

    最近用ionic3开发的一个项目在ios中出现了白屏的问题 banner轮播图跳转网页 使用了iframe 但是却时不时的出现白屏现象 在android中一切正常 网上查资料发现 是因为ios不允许访 ...

  6. 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中配置.除了配置允许上网的配置之外,还有另一项.

  7. 小程序 ios 10.1.x 白屏问题

    遇到这个问题有点莫名其妙只有IOS10.1.x显示白屏 解决过程很坎坷,一开始以为是调试基础库的问题,改成最新的2.9.2版本. 用这个创建新的项目,把之前的项目内容放到新建项目内, 发现还是不行,后 ...

  8. 提升html5的性能体验系列之一避免切页白屏

    窗体切换白屏的现实问题 HTML5的性能比原生差很多,比如切页时白屏.列表滚动不流畅.下拉刷新和上拉翻页卡顿.在低端Android手机上,很多原生App常用的功能和体验效果都很难使用HTML5技术模拟 ...

  9. 提升HTML5的性能体验系列之一 避免切页白屏

    窗体切换白屏的现实问题 HTML5的性能比原生差很多,比如切页时白屏.列表滚动不流畅.下拉刷新和上拉翻页卡顿.在低端Android手机上,很多原生App常用的功能和体验效果都很难使用HTML5技术模拟 ...

  10. 【js】我们需要无限滚动列表吗?

    无限滚动列表,顾名思义,是能够无限滚动的列表(愿意是指那些能够不断缓冲加载新数据的列表的).但是,我们真的需要这样一个列表吗?在PC端,浏览器的性能其实已经能够满足海量dom节点的渲染刷新(笔者经过简 ...

随机推荐

  1. P1551 亲戚 题解。。。

    并查集 目录 并查集 (1.概念: (2.详解 Q1:如何表示不同的家族 ans1: Q2:如何将两个人归到同一个家族中 ans2: CODE: PS: (1.概念: 处理 不相交 可合并 的集合关系 ...

  2. 文件系统(八):Linux JFFS2文件系统工作原理、优势与局限

    liwen01 2024.06.23 前言 在嵌入式Linux设备中,经常使用jffs2文件系统来作为参数区的文件系统格式.至于为什么要使用jffs2来作为参数区的文件系统,我猜大部分人都没有做过多的 ...

  3. Linux 提权-LXD 容器

    本文通过 Google 翻译 LXD Container – Linux Privilege Escalation 这篇文章所产生,本人仅是对机器翻译中部分表达别扭的字词进行了校正及个别注释补充. 0 ...

  4. Python——比 Seaborn 更好的相关性热力图:Biokit Corrplot

    目录 前言:我们需要更好的相关性热力图 对比 Python Seaborn 与 R corrplot 传统的 Seaborn 相关性热力图 R 语言中的相关性热力图 关于 Biokit 简介 库的安装 ...

  5. RPC和心跳机制

    hadoop在节点间的内部通讯使用的是RPC,RPC协议把消息翻译成二进制字节流发送到远程节点,远程节点再通过反序列化把二进制流转成原始的信息. namenode与datanode之间的通信,jobt ...

  6. manage.py“Couldn't import Django”报错的问题解决

    问题分析: 在pyharm中项目可以正常运行但是在终端 终端输入python manage.py runserver首次测试项目时,出现了无法引用Django的错误. Traceback (most ...

  7. 高程读后感(四)— 关于BOM本人容易忽略的知识点总结

    目录 window对象 window对象上属性及方法 超时调用setTimeout和间歇调用setInterval BOM location对象及其位置操作 history对象 window对象 wi ...

  8. NodeJS中Buffer与字符串相互转换时一个值得注意的问题

    什么问题 如果一个Buffer的 toString() 结果为乱码或含有乱码,那么用此字符串以 Buffer.from()方法构造出来的Buffer将与原来的Buffer不相同. 这一点其实很好理解, ...

  9. [oeasy]python0095_乔布斯求职_雅达利_atari_breakout_打砖块_布什内尔_游戏机_Jobs

    编码进化 回忆上次内容 上次 我们回顾了 电子游戏的历史 从 电子游戏鼻祖 双人网球 到 视频游戏 PingPong 再到 街机游戏 Pong 雅达利 公司 来了 嬉皮士 捣乱? 布什内尔 会如何 应 ...

  10. [MRCTF2020]Ezpop(反序列化)

    打开题目即可得源码 Welcome to index.php <?php //flag is in flag.php //WTF IS THIS? //Learn From https://ct ...