移动端分页列表,在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. Java面试知识点(一)多态

    多态概述 1. 定义 多态就是指程序中定义的引用变量所指向的具体类型和通过该引用变量发出的方法调用在编程时并不确定,而是在程序运行期间才确定,即一个引用变量倒底会指向哪个类的实例对象,该引用变量发出的 ...

  2. ARC 170_A 题解

    AT_arc170_a [ARC170A] Yet Another AB Problem 题解 这道题做了我七天 (同时也是我第一到通过的 ARC 题) 太酷了 其实还是比较好理解的 原题题干 原题题 ...

  3. Ubuntu 18.04 安装OneDrive自动同步

    Ubuntu 18.04 安装OneDrive自动同步 Windows10系统已经自带了OneDrive的自动同步功能,对于多设备用户而言已经成为了一个非常方便传输保存文件的途径,在Ubuntu下也有 ...

  4. P2935

    [USACO09JAN]Best Spot S 题目 约翰拥有P(1<=P<=500)个牧场.贝茜特别喜欢其中的F个.所有的牧场 由C(1 < C<=8000)条双向路连接,第 ...

  5. [oeasy]python0092_homebrew_家酿俱乐部_比尔盖茨_保罗艾伦

    编码进化 个人电脑 intel 8080 的出现 让 人人都 可能有 一台计算机 Ed Robert 的 创业之路 从 售卖 diy 组装配件 到进军 计算器市场 计算器 毕竟不是 个人计算机 这计算 ...

  6. [oeasy]python0068_ 字体样式_正常_加亮_变暗_控制序列

    字体样式 回忆上次内容 上次了解了一个新的转义模式 \33 逃逸控制字符 esc esc 让输出 退出标准输出流 进行控制信息的设置 可以清屏 也可以设置光标输出的位置 还能做什么呢? 可以设置字符的 ...

  7. Python 按规则解析并替换字符串中的变量及函数

    按规则解析并替换字符串中的变量及函数 需求 1.按照一定规则解析字符串中的函数.变量表达式,并替换这些表达式.这些函数表达式可能包含其它函数表达式,即支持函数嵌套 2.函数表达式格式:${ __函数名 ...

  8. Prometheus 基于Python Django实现Prometheus Exporter

    基于Python Django实现Prometheus Exporter 需求描述 运行监控需求,需要采集Nginx 每个URL请求的相关信息,涉及两个指标:一分钟内平均响应时间,调用次数,并且为每个 ...

  9. 关于Script的猜想和代码设计

    由于现在接触的是蓝图,而之前接触的脚本,这两者有些不一样. 对脚本的设计如果是代码的解析的话, 对蓝图的设计则需要提供一些底层的API. 变量分为:  基础类型 ,复合类型 ,容器类型 NewGlob ...

  10. 彻底搞懂python super函数的作用

    super() 的入门使用 在类的继承中,如果重定义某个方法,该方法会覆盖父类的同名方法,但有时,我们希望能同时实现父类的功能,这时,我们就需要调用父类的方法了. 调用父类同名方法有两种方式: 1.调 ...