- 问题根源:弹窗中隐藏滚动条的方法scrollbar-width会影响ios系统的渲染,导致其他组件都会遮挡触发的弹窗。
找了一下午,当时把重点放在了调整组件之间z-index上面,发现怎么调都还是被覆盖。最后发现在ios12上面scrollbar-width: none是被禁用的。
解决方法:更换了隐藏滚动跳的方法,
::-webkit-scrollbar { display: none; }
- 原因:
scrollbar-width最初由Firefox用于控制滚动条的宽度。(在iOS等其他浏览器中,虽然表面上忽略这个属性,但改变元素的渲染行为)- 形成新层叠上下文。
- 层叠顺序改变:一旦形成新的层叠上下文,元素的z-index值会相对于这个新上下文计算,导致预期外的层叠顺序。