移动端分页列表,在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. Android 耳机驱动知识

    Android 耳机驱动知识 2015-03-06 工作以后接手的第一个驱动就是android平台下耳机的插拔检测和按键检测.这部分涉及的硬件知识比较简单,但是软件上对中断的处理,软件检测的鲁棒性,都 ...

  2. 一招解决github访问慢的问题

    ​ 之前我在网上搜过解决办法,其中一个是修改 hosts 文件,但是效果不太理想.我在这里给大家推荐github上的一个开源项目:FastGithub .用了这个之后,效果就比较理想了,次次都能访问到 ...

  3. 【论文阅读】IROS2022: Dynamics-Aware Spatiotemporal Occupancy Prediction in Urban Environments

    0.参考与前言 完整题目: Dynamics-Aware Spatiotemporal Occupancy Prediction in Urban Environments 论文链接:https:// ...

  4. Linux内存不够了?看看如何开启虚拟内存增加内存使用量

    1.为什么要使用虚拟内存 当我们没有多余的钱去购买大内存的云服务器时,但是当前服务器里面的软件和程序运行的比较多导致内存不够用了.这个时候可以通过增加虚拟内存来扩大内存容量.但是在启用虚拟内存时,需要 ...

  5. Power BI实用技巧:轻松打造专业级甘特图

    Power BI实用技巧:轻松打造专业级甘特图 大家好,今天我们要一起探索Power BI中一个既实用又强大的功能--制作甘特图.甘特图以其直观展示项目时间线和任务进度的特点,在项目管理中扮演着重要角 ...

  6. 洛谷P1451

    背景:复习 简单的dfs,也可以说是有点像连通块 #include<iostream> #include<utility> using namespace std; typed ...

  7. SQL Server 新增函数大全(各版本)

    SQL Server 2017 CONCAT_WS ( separator, argument1, argument2 [, argumentN]... ) --采用可变数量的字符串自变量,并将它们串 ...

  8. sed 进阶使用

    sed 进阶使用 工作原理 sed 维护两个数据缓冲区: 活动模式空间 和 辅助保持空间 两者最初都是空的 sed 通过对每一行输入执行以下循环进行操作 从输入流中读取一行,删除任何尾随的换行符,并将 ...

  9. Django model 层之聚合查询总结

    Django model 层之聚合查询总结 by:授客 QQ:1033553122 实践环境 Python版本:python-3.4.0.amd64 下载地址:https://www.python.o ...

  10. mysql面试汇总

    最近一直在关注mysql方面的面试题目,并且从最近的面试情况来看,mysql在java后端的面试中,肯定是必问的题目,所以这里有必要对这块的内容进行总结,大家可以根据下面的导图进行重点复习, 引擎 1 ...