admin管理员组

文章数量:1611156

文章目录

      • 问题描述
      • 解决之道
      • 思路和踩的坑
        • 思路：
        • 踩坑（不完美/无效的解决方案）：

问题描述

安卓手机上，微信环境下上传完图片后，position: fixed 的导航栏在上下滚动页面的时候出现了抖动的情况，抖动完回到原位。
ios上没测，但搜索问题的过程中发现有人反应IOS微信环境下position:fixed也有抖动的问题。

解决之道

页面结构是：

<div ></div>
<nav fixed></nav>

对’#app’设置样式：

#app {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: auto
}

这个方法思路来源自张鑫旭的博客fixed在微信下的BUG。应用后安卓、ios均是好的，不会抖动。

思路和踩的坑

思路：
  • 上传图片本身不会引发抖动，是因为图片上传后可能增加了新的一行，reflow导致的。

错误！如果是因为reflow导致的，那么在删除图片而减小一行后也会抖动，但实际并没有。问题还是出在上传图片这个动作上

踩坑（不完美/无效的解决方案）：
  1. 给fixed加上translateZ(0)

加上以

本文标签： 解决之道Positionfixed

版权声明：本文标题：微信position: fixed的坑及解决之道 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dianzi/1728606971a1165575.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。