[前端]-IOS端弹窗被页面其他组件遮挡

48 阅读1分钟
  • 问题根源:弹窗中隐藏滚动条的方法scrollbar-width会影响ios系统的渲染,导致其他组件都会遮挡触发的弹窗。

找了一下午,当时把重点放在了调整组件之间z-index上面,发现怎么调都还是被覆盖。最后发现在ios12上面scrollbar-width: none是被禁用的。

解决方法:更换了隐藏滚动跳的方法,

::-webkit-scrollbar { display: none; }
  • 原因:
  1. scrollbar-width最初由Firefox用于控制滚动条的宽度。(在iOS等其他浏览器中,虽然表面上忽略这个属性,但改变元素的渲染行为)
  2. 形成新层叠上下文。
  3. 层叠顺序改变:一旦形成新的层叠上下文,元素的z-index值会相对于这个新上下文计算,导致预期外的层叠顺序。