position fixed在iPhoneXs max下被遮挡问题
发布于 6 年前 作者 yangsong 13742 次浏览 来自 问答

由于业务需要，自己做了一个从底部弹起的组件，类似modal，组件只有两个部分，一个遮罩层，一个内容区域，样式代码如下：

.mask{
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #222;
  opacity: 0.5;
  overflow: visible;
}
.modal{
  position: fixed;
  bottom: 0;
  background: #fff;
  width: 100%;
  opacity: 1;
  overflow: visible;
  z-index: 4;
}
[@-webkit-keyframes](/user/-webkit-keyframes) show{
  from{height: 0;}
}

在安卓以及其他iPhone下，显示正常，正常图如下：

但是在iPhonexs Max下，这个modal第一次从隐藏变显示时的表现是这样的：

关闭之后再次点击又恢复正常，请问这个问题有什么好的解决方法啊

回到顶部