【bug记录1】vant-swipe组件在ios上初始加载后右边显示存在空白间隙

一、问题描述

1、问题背景

移动端的web-view业务项目开发

2、问题场景

开发的页面使用到了vant中的swipe组件去封装轮播图，在浏览器调试一切良好。

但是从移动端进入web-view的时候，进入到页面轮播图一会显示正常，一会儿轮播图右边出现了空白间隙，时好时坏

二、问题定位

时好时坏一般是由于自身开发不严谨，没有正确配合组件库的样式计算方式，导致偶发失效

推测可能原因：

• css宽高样式被干扰导致失效
• 页面缓存问题
• 在使用组件的时候漏了什么属性

三、问题解决

经过排查发现，

是因为轮播图中的img元素，默认是inline元素，但却对它设置了宽高，期望它横向撑满父元素，但这其实是无效设置。

因而可能导致swipe初始化的时候由于网络请求或者初始布局的原因，图片元素没能正确布局。

inline元素的特性：

1. 所有inline元素都在一行上；
2. 元素的高度、宽度、行高及顶部和底部边距不可设置；
3. 元素的宽高就是它包含的文字或图片的宽高，不可设置改变；

最后给img元素设置display: inline-block即可解决。