文章目录
问题描述
安卓手机上,微信环境下上传完图片后,position: fixed 的导航栏在上下滚动页面的时候出现了抖动的情况,抖动完回到原位。
ios上没测,但搜索问题的过程中发现有人反应IOS微信环境下position:fixed也有抖动的问题。
解决之道
页面结构是:
<div id="#app"></div>
<nav fixed></nav>
对’#app’设置样式:
#app {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow: auto
}
这个方法思路来源自张鑫旭的博客fixed在微信下的BUG。应用后安卓、ios均是好的,不会抖动。
思路和踩的坑
思路:
- 上传图片本身不会引发抖动,是因为图片上传后可能增加了新的一行,reflow导致的。
错误!如果是因为reflow导致的,那么在删除图片而减小一行后也会抖动,但实际并没有。问题还是出在上传图片这个动作上
踩坑(不完美/无效的解决方案):
- 给fixed加上translateZ(0)
加上以