uni-app 中在 iOS Safari 浏览器中一些奇怪的显示问题

[EmiyaGm]

tab切换滑动导致文字丢失

先看实现效果：

上面三个 tab 项切换用来做筛选，整个部分使用 fixed 进行固定，原代码是这么写的

<view class="filter-area">
          <view
            class="filter-item"
            @tap="changeFilter(0)"
            :style="{ color: state.filterIndex === 0 ? '#9c7a4b' : '#888888' }"
          >
            综合
            <view class="active-line" v-if="state.filterIndex === 0"></view>
          </view>
          <view
            class="filter-item filter-item-middle"
            :style="{ color: state.filterIndex === 1 ? '#9c7a4b' : '#888888' }"
            @tap="changeFilter(1)"
            >价格<view class="active-line" v-if="state.filterIndex === 1"></view
          ></view>
          <view
            class="filter-item"
            :style="{ color: state.filterIndex === 2 ? '#9c7a4b' : '#888888' }"
            @tap="changeFilter(2)"
            >上新<view class="active-line" v-if="state.filterIndex === 2"></view
          ></view>
        </view>

// 由 filterIndex 控制底部横线显示与否以及文字的样式

乍一看这种实现确实没什么问题，但是在测试的过程中，在移动端 h5 的环境中，在 iOS Safari 浏览器里，会出现一种奇怪的 bug 现象。

这个问题已经修复好了，所以我就简单的描述一下。就是在滑动页面或者 tab 栏时，随机会使 tab 栏的某一个非 active 状态的子项消失，然后你再点击该子项就又出现了。

后来多方调试处理，初步判断可能是后面 v-if 的页面元素显示与否的判断影响了页面渲染，于是就修改了写法，横线采用 css 中的 border 来进行绘制，移除 v-if 控制页面元素显示的方式。