[youzan/vant]popup 在ios下显示异常

ios版本：一个10.X（iphone5），一个11.X（iphone7），都是用的自带safari。 html结构如下：

//父容器采用flex垂直布局。
<div>
    <div>这里是一个高为60px的navbar的组件</div>
    <div>这里是高为自动占满的主要内容</div>
</div>

本来是这样的：点击主要内容的某一个地方，会弹出一个弹层，可以进行一些操作。在安卓以及PC没有问题，弹层以及遮罩层都是在最上层，但是在ios下，navbar组件会在最上面。

尝试过改z-index，没有效果，还在修改中。求助！

llk2yq

有一个可能是z-index在transform的前提下，在safari会失效。

llk2yq

@YYQ8023 我尝试了一下没有复现此问题，下面是我测试用的代码。你能提供更多的细节嘛？可能是其他因素导致的 z-index 错误

<div :style="{ display: 'flex', flexDirection: 'column' }">
  <van-nav-bar title="标题"/>
  <div @click="show = true">content</div>
  <van-popup v-model="show">
    popup
  </van-popup>
</div>

chenjiahan

@chenjiahan 我的popup组件是在content这个div里的。 content这个div的高度会等于总高度减navbar高度，且设置了overflow：auto。调试发现popup的可见高度就是content这个div的可见高度，实际高度由于是fix定位，是正确的（100%高度）。问题便是：popup的头部，即在content这个div可见高度上面的部分，会被navbar遮挡住，实际上应该是popup遮挡住navbar才对。因为业务的关系，暂时不能考虑把popup提到外层来，而且我试了一下，popup提出来就没有这个问题。

这可能是ios的一种风格，可能无解，或者可以考虑强行把popup弹层放到body下，我再研究研究。

llk2yq

@YYQ8023 好的，如果能提供 jsfiddle 的话我可以一起看下

chenjiahan

@chenjiahan 不能复现这种情况吗？简单来说，就是popup在ios下，会被父级的兄弟元素遮挡住。

llk2yq

@YYQ8023 我按你的描述试了下，还是不行噢，是否有其他样式导致的？

chenjiahan

我也遇见过这个问题, IOS下, popup没有覆盖最上面的tabs, 如果将popup提到跟tabs同一层级能覆盖

<div :style="{ display: 'flex', flexDirection: 'column' }">
  <van-nav-bar title="标题"/>
  <div @click="show = true">content</div>
  <van-popup v-model="show">
    popup
  </van-popup>
</div>

上面这是能覆盖navbar的.

<div :style="{ display: 'flex', flexDirection: 'column' }">
  <van-nav-bar title="标题"/>
  <children-content></children-content>
</div>

如果popup在children-content这子组件里面就不能覆盖navbar了. 这个情况只在IOS下出现, 在安卓和pc调试的时候没出现

hyion

指定get-container=“body”，让它挂载到body上

hehuangz

我也遇到同样的问题了 ios下 -webkit-overflow-scrolling: touch;属性导致的楼上仁兄的get-container=“body”可以解决

thjjames

get-container=“body”解决，但是在返回时报错

zengcul

指定get-container=“body”，让它挂载到body上

get-container在小程序端用不了，小程序端怎么解决呢

2993518236gis

@chenjiahan 不能复现这种情况吗？简单来说，就是popup在ios下，会被父级的兄弟元素遮挡住。

以上仁兄说的是本质问题
也遇到了该问题，使用了 transform: translateZ(1px) 方案解决了，相关参考: https://blog.csdn.net/weixin_41697143/article/details/108542551
- 后续：该方案后续发现有问题，涉及交互时，无法响应，推荐 get-container=“body”
最简洁的是 @hehuangz 指定get-container=“body”，让它挂载到body 的方案

FuDesign2008

[youzan/vant]popup 在ios下显示异常

回答