IOS16版本，h5页面点击文字消失事件...

近期开发的公众号h5页面，经过了开发测试都没有发现问题，然而在产品验收的时候，却在个别水果机上发现了一个很诡异的问题，话不多说，开整......

这部分交互是很简单的，就是有4个文字，点击那个就选中当前，其他的文字取消选中。小伙伴们肯定都不陌生，写起来也很简单。

// 简化代码
<div class="zy_pay_money_chose_item" :class="dataObj.choseItem === item ? 'zy_pay_money_chose_item_cur' : ''" v-for="item in moneyList" :key="item" @click="choseMoney(item)">
   <img v-if="dataObj.choseItem === item" :src="getAssets('gongyi/icon_select.png')"  />
   <span>{{ item }} <i>元</i></span>
</div>

let dataObj = reactive({
  choseItem: ''
})
const moneyList = ['10', '20', '30', '40']

// 选中固定金额
const choseMoney = (item: string | number)=>{
  if(dataObj.choseItem !== item){
    dataObj.choseItem = item
  }
}

看上去没有任何问题，经过大部分测试也没有任何问题，但是问题就这么出现了。

首先进入页面，选择一项，没有问题😄

然后点击其他选项，问题出现了😭

刚才被选中的那一项，文字不见了！就这么莫名其妙的不见了！！！如果再去选其他选项，那么只要是被选中过的选项文字都会不见，但是却能触发选中状态效果。

问题最显排查方法，是给span元素单独设置了文字颜色，但是并没有什么用；然后去看看html结构，发现选中和不选中是有区别的，就是img角标是否存在，那么会不会是这个影响的呢？

去掉图片试一下，果然！！！问题消失了！！！既然发现问题了，就可以修改了，不让img图片消失，第二版诞生

// 此处只修改了html结构，其他代码省略
<div class="zy_pay_money_chose_item" :class="dataObj.choseItem === item ? 'zy_pay_money_chose_item_cur' : ''" v-for="item in moneyList" :key="item" @click="choseMoney(item)">
   <img :src="dataObj.choseItem === item ? getAssets('gongyi/icon_select.png') : ''"  />
   <span>{{ item }} <i>元</i></span>
</div>

测试发现，有问题的手机正常了，其他ios也没问题~~~ but!安卓机有问题了，我们给img标签的src设置了空值，在安卓上出现了无图的小图片（大家都懂的），既然这样，那就在未选中时，给一张透明背景或者白背景的图好了。最终代码：

<div class="zy_pay_money_chose_item" :class="dataObj.choseItem === item ? 'zy_pay_money_chose_item_cur' : ''" v-for="item in moneyList" :key="item" @click="choseMoney(item)">
    <img :src="dataObj.choseItem === item ? getAssets('gongyi/icon_select.png') : getAssets('gongyi/icon_select_white.png')"  />
    <span>{{ item }} <i>元</i></span>
</div>

至此，问题全部解决。但是关于问题产生的原因还没时间具体了解，考虑可能的原因可能和图片设置的absolute方式有关，但是具体为什么也不是很清楚，希望有了解的小伙伴评论区给出答复，万分感谢~