vantui van-popup 在 ios 下 z-index 失效 vuescroll -webkit-overflow-scrolling: touch

问题描述：

基于vant ui 二次封装的 van-popup 组件，与vuescroll局部滚动结合使用，在ios某些版本手机呼出时无法覆盖上下布局的底部的导航条元素，设置z-index不起作用。

//父容器采用flex垂直布局。
<div class="root-container">
    <vuescroll>flex上下布局 ，高度为100vh - 底部导航高度的局部滚动</vuescroll>
    <div class="bottoom-container">底部导航</div>
</div>

 

问题原因：

原因 ios系统下当设置-webkit-overflow-scrolling: touch 属性的元素发生弹性滚动时会导致 z-index 失效

解决方法：

1. 修改-webkit-overflow-scrolling 属性值为 auto；（ios滑动卡顿，不推荐）

2. 将popup与底部导航元素放到同级，或者放在body下；（无法封装组件维护不友好）

3. 在封装组件内部的popup上添加  get-container="body"  属性 （推荐）

<van-popup
      v-model="showPicker"
      :close-on-click-overlay="false"
      position="bottom"
      get-container="body"
    >
      <van-datetime-picker
        v-model="selectedValue"
        type="time"
        :min-hour="6"
        @confirm="onConfirm"
        @cancel="onCancel"
        cancel-button-text="清空"
      />
    </van-popup>