收藏
回答

position fixed在iPhoneXs max下被遮挡问题

由于业务需要,自己做了一个从底部弹起的组件,类似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 show{
  from{height: 0;}
}

在安卓以及其他iPhone下,显示正常,正常图如下:



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


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

回答关注问题邀请回答
收藏

1 个回答

  • 灵芝
    灵芝
    2019-05-15

    麻烦提供出现问题的具体机型、微信版本号、系统版本号,以及能复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html

    2019-05-15
    有用
    回复 4
    • 2019-05-15

      机型:iPhone XS Max;微信版本号:7.0.4;系统版本:12.1.3;代码片段:https://developers.weixin.qq.com/s/oKzSRnma708p

      2019-05-15
      回复
    • 灵芝
      灵芝
      2019-05-15回复

      你用这个代码片段可以复现么?我用iPhone XS Max测试是这样的


      2019-05-15
      回复
    • 2019-05-15回复灵芝

      这是调试代码https://developers.weixin.qq.com/s/9UXxDnm67M8x,我所更改的是在content组件中调用footModal组件,再将content组件放入index.wxml页面中的设置了max-height的scroll-view内,此时就出现了这样的问题,将max-height改为height后正常,请问这样的写法在iphonex max 下为什么会表现不同呢

      2019-05-15
      回复
    • 灵芝
      灵芝
      2019-05-16回复

      scroll-view需要一个固定高度的


      2019-05-16
      回复
登录 后发表内容