移动端分页列表,在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. ODPS 不用循环生成连续日期

    生成 20230801 ~ 20230831之间的每一天的sql代码怎么写? 只要一行代码. 一行代码: select TO_CHAR(DATEADD(TO_DATE(bizdate,'yyyymmd ...

  2. 掉了两根头发后,我悟了!vue3的scoped原来是这样避免样式污染(上)

    前言 众所周知,在vue中使用scoped可以避免父组件的样式渗透到子组件中.使用了scoped后会给html增加自定义属性data-v-x,同时会给组件内CSS选择器添加对应的属性选择器[data- ...

  3. python基础-内置函数

    # callable() # 函数用于检查一个对象是否是可调用的.如果返回 True,object 仍然可能调用失败:但如果返回 False,调用对象 object 绝对不会成功. # 对于函数.方法 ...

  4. Git ignore 忽略文件不起作用

    前提:拉取了项目上的代码,或者自己本地已经提交过了的文件.然后在 .gitignore 文件中添加了过滤,但是不管用,还是可以追踪 解决方案: 1.先删除本地的文件(可以备份到其他文件夹外) 2.然后 ...

  5. debian11 使用podman搭建 nacos-server

    前言 基于debian11 + podman 搭建 nacos-server 用于简单测试. nacos-server基于java,如果直接运行还要准备java环境,在docker/podman 镜像 ...

  6. 请解释一下 JavaScript 的同源策略?

    概念:同源策略是客户端脚本(尤其是Netscape Navigator2.0,其目的是防止某个文档或脚本从多个不同源装载.这里的同源策略指的是:  协议,域名,端口 相同,同源策略是一种安全协议.指一 ...

  7. JVM是如何创建一个对象的?

    哈喽,大家好,我是世杰. 本文我为大家介绍面试官经常考察的「Java对象创建流程」 照例在开头留一些面试考察内容~~ 面试连环call Java对象创建的流程是什么样? JVM执行new关键字时都有哪 ...

  8. 转载 | win11右键菜单改为win10的bat命令(以及恢复方法bat)

    原文来自这里:https://blog.51cto.com/knifeedge/5340751 版权归:IT利刃出鞘 本质上就是写入注册表. 一.右键菜单改回Win10(展开) 1. 新建文件:win ...

  9. QCon 回顾 | Data Fabric:逻辑统一、物理分散

    Data Fabric(数据编织),自 2019 年开始就在 Gartner 年度技术趋势榜单上安家,并在 2022 年被列为数据分析领域十大技术趋势之首,它究竟有哪些价值?又如何在企业落地? 在近日 ...

  10. Swift开发基础03-函数

    定义 形参默认是let,也只能是let func sum(v1: Int, v2: Int) -> Int { return v1 + v2 } sum(v1: 10, v2: 20) // 无 ...