最近在写 h5 弹窗，相信大家一定对于移动端里面的弹窗的底层滚动很烦吧，因为涉及到一个滚动穿透的问题。 这里有一篇文章可以解决 解决滚动穿透
可怕的是我今天并不是要讲这个问题，而是一个更神奇的，出现在 safari 上弹窗不显示的问题。
如图，在电脑上模拟显示效果，很正常：
但是在苹果手机 safari 上
可以看见， 第一个 switch 开关已经打开，但是弹窗却没有显示。 这就呵呵了， 排查问题后发现，不是什么弹窗定位问题，而是因为 switch 开关的变形。 大概推测出 transfrom 对 视图层有影响。 然后在网上查阅得知：
了解到： 关于 css 中的视图层级堆叠规则： 大家知道 html 元素显示中，两个绝对定位相同位置的元素， 谁写在后面，谁就会被显示出来。所以，在 层叠上下文中就是，默认谁在后面谁在上面，根据张旭大大的叫法，也就是后来居上。而关于元素的层叠顺序(也就是显示顺序)依次为：
背景 =》 z-index 为负 =》 正常块状元素 =》浮动块状元素 =》 可以镶嵌在块状元素里面的内联元素 =》 z-index 越大的的元素
依照这个顺序，所以当我们想让一个元素覆盖另一个元素的时候，通常做法也就是改变它的 z-index 。 而事实上，除了 z-index 会引起 层级顺序的改变之外，还有以下我们常常遇到的几点：
- 当一个元素位于HTML文档的最外层（元素）
- 当一个元素被定位了并且拥有一个 z-index 值（不为auto）
- 当一个元素被设置了 opacity，transforms, filters, css-regions, paged media 等属性
- flex item，也就是父元素的 display 设置了 flex 或者 inline-flex 值
- 元素的 overflow-scrolling 值不为 touch
- 元素的 filter 值不为 none
- 元素的 perspective 值不为 none
所以这里 switch 里面的 transfrom , 使开关在滑动的时候， 创建了新的上下文，导致弹窗针对原本上下文设置的 z-index 失效，但是等开关滑动完成后，新的上下文消失， 回到原本上下文， 然后弹窗设置的 z-index 就可以生效了。想必说到这里，大家都能知道解决办法了吧。 最后我是，通过延迟显示弹窗，等动画完成后在显示的。
这里可以看看
深入理解CSS中的层叠上下文和层叠顺序