如题,记录一次问题解决,困扰我两天之久,最后终于解决
背景:一个加载信息的长列表,就普通长列表,没有用fixed,absolute之类的布局,筛选自定义了ActionSheet半屏菜单,半屏菜单fixed设置了遮罩,然后内容部分高一层级的内容fixed底部,设置了定高,有title区和底部确认btn区,中间内容滚动可见,提测后,iphone11机型ios13版本下,底层列表数据很少时(这个是后来试了很多次必现的条件才发现的)半屏菜单右侧出现白色竖条,底部也有白色遮挡,如下图,正常的应该半屏菜单显示筛选项内容
解决方案:
一开始一直以为是组件本身的问题,一直在排查自定义的ActionSheet本身的布局,总是在想是不是fixed在ios下的类似的布局坑(之前fixed布局滚动内容遇到过很多坑);
然后本地调试的时候发现,当白色条出现的时候底部内容区的宽度是是看起来缩短了一下子的,看起来就像是右侧白色区域挤占了本来内容区的宽度,咦,于是我在本身的内容列表最外层加了width:100vw,然后右侧白条没有了。
底部还是没有内容,刚开始以为是z-index层级的问题,调了一下并没有用,然后想到了刚才横向的修改,是不是内容区域过短,导致遮挡了呢,于是给长列表加了min-height:100vh,问题解决了。
但是其实我还是非常疑惑的,我的ActionSheet已经是fixed和底部内容不在一个层级了,在这个机型下还会受到底部内容区域的影响,就很奇怪,特此记录一下,也许积累多了会实现量变到质变吧~
仅个人总结,欢迎批评指正~