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>