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节点的渲染刷新(笔者经过简 ...
随机推荐
- 【读论文】CM-Gen: A Neural Framework for Chinese Metaphor Generation with Explicit Context Modelling
为了更好的阅读体验,请点击这里 由于发不出论文,所以找点冷门方向做一做.从汉语比喻开始. 读完这篇论文之后我觉得 COLING 这方向我上我也行(ε=ε=ε=┏(゜ロ゜;)┛ 题目:CM-Gen: A ...
- 实验5.OSPF配置实验
# 实验5.OSPF配置实验 配置ospf使全网联通 实验组 拓扑,路由器选择为AR2220,交换机为S5700 联通配置 给每台路由器的对应端口配置相应的ip,并启动ospf协议,可以看到此时5台设 ...
- 日常Bug排查-改表时读数据不一致
前言 日常Bug排查系列都是一些简单Bug的排查.笔者将在这里介绍一些排查Bug的简单技巧,同时顺便积累素材. Bug现场 线上连续两天出现NP异常,而且都是凌晨低峰期才出现,在凌晨的流量远没有白天高 ...
- 传统RNN网络及其案例--人名分类
传统RNN网络及其案例--人名分类 传统的RNN模型简介 RNN 先上图 这图看起来莫名其妙,想拿着跟CNN对比着学第一眼看上去有点摸不着头脑,其实我们可以把每一个时刻的图展开来,如下 其中,为了简化 ...
- NXP i.MX 8M Mini视频开发案例分享 (上)
本文主要介绍i.MX 8M Mini的视频开发案例,包含基于GStreamer的视频采集.编解码.算法处理.显示以及存储案例,GigE工业相机测试说明,H.265视频硬件解码功能演示说明等. 注:本案 ...
- 钉钉应用开发-Python操作钉钉文档(excel版)
钉钉应用开发-Python操作钉钉文档 一: 服务端SDK下载 服务端SDK下载 - 钉钉开放平台 (dingtalk.com) pip3 install alibabacloud_dingtalk ...
- n阶前缀和 の 拆解
二阶 \[\sum_{i=l}^{r} \sum^{i}_{j=1} a_j \] \[=\sum_{i=l}^{r} (r-i+1) a_i \] \[=(r+1)\sum_{i=l}^{r} a_ ...
- Java 对象转XML xStream 别名的使用 附下载方式
下载方式 Maven方式 pom.xml中 <dependency> <groupId>xstream</groupId> <artifactId>xs ...
- JavaScript系列:JS实现复制粘贴文字以及图片
目录 一. 基于 Clipboard API 复制文字(推荐) 基本概念 主要方法 使用限制 实际应用示例 二.基于 document.execCommand('copy') 缺陷 实际应用示例 说明 ...
- element-plus如何隐藏el-row
在 Element Plus 中,el-row 是用于布局的组件,如果你想要隐藏 el-row,你可以使用 CSS 的 display 属性将其设置为 none.以下是一个简单的示例: <tem ...