随笔

Safari 自动隐藏导航栏

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

Question

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

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

IMG_3240 (1).png
图 1

IMG_3241 (1).png
图 2

IMG_9AFAAEFA4496-1 (1).jpeg
图 3

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

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

RPReplay_Final1646655312.gif
图 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;
}

本文链接:https://note.lilonghe.net//post/safari-automatically-hides-the-navigation-bar.html

-- EOF --