这几天在适配移动端，在 iOS Safari 发现了一个很恶心的东西，就是最下面的导航栏是一个薛定谔的猫一样的一个东西，它既不是固定位置类似视口变小，也不是飘在最上面的纯悬浮层。

Question

看下图，循环显示了三十个区块，一种情况就是图1中的效果，内容三十区块只显示了一个头部，下面还有很多内容没出来，另外一种就是图2，我们预想中的情况，而这两种情况竟然是可以同时存在，来回跳动，新时代的 IE 真是名不虚传。

另外，这个时候从上往下拖动时悬浮栏不会缩小的，图3是目前最好的效果了，页面往下滚时自动缩小，往上滚时自动悬浮。

图 1

图 2

图 3

最开始没注意到第三种才是正常的，为了适配上面的“薛定谔的猫”特意判断是不是 iOS Safari，如果是则给页面加上一个 75px 的 padding-bottom。

后来注意到这个异常情况，是因为在手机上看自己博客的时候，发现导航栏自动隐藏了，对比代码始终没看出什么异常，唯一的可能一个区别是我的博客是 body 滚动的，而这个项目因为是管理系统，里面有些全屏之类的东西，滚动是在里面某一层做的。
抱着尝试下的心理试了试，结果竟然还真是这个原因 w(ﾟДﾟ)w，成品如图4。

图 4

Fix

伪代码大概就是下面这样，确保滚动是 body 在滚就行

// bed
.pageWrapper {
    height: 100vh;
    overflow-y: scroll;
}
// good
.pageWrapper {
    min-height: 100vh;
    overflow-y: scroll;
}

funny

抱着实验的心理，又多测试了几次，又发现一个很好玩的东西。
有时候为了防止奇怪的地方超出屏幕，会加上overflow-x: hidden，确保就算有东西超出也不会影响整体。
然后有意思的来了，如果 html 设置了 overflow 属性，那么 iOS Safari 导航栏就不会自动隐藏，不知道 Safari 的开发人员基于什么心理，做了这么样的特性，总之非常 funny。

// bed
html, body {
    height: 100%;
    overflow-x: hidden;
}
// good
html, body {
    height: 100%;
}
body {
    overflow-x: hidden;
}