蘋果會(huì)對(duì)position: fixed的元素位置做調(diào)整嘹黔，這件事情已經(jīng)遇到兩次了该园。
問題
移動(dòng)端開發(fā)中為了實(shí)現(xiàn)一個(gè)居中的彈窗，我們經(jīng)常會(huì)做一個(gè){position: fixed; height: 100%}的半透明蒙層，然后相對(duì)這個(gè)蒙層增加一個(gè)子節(jié)點(diǎn)间护，實(shí)現(xiàn)彈窗企蹭。彈窗里可能是一句簡單提示加一個(gè)確定按鈕白筹；或者有一些相對(duì)復(fù)雜的交互，比如 modal 框里要用戶填寫一些信息谅摄。
2017年3月份遇到的一個(gè)問題是徒河，在 Safari 里，點(diǎn)擊到 modal 框里 <input /> 時(shí)送漠，modal 框會(huì)如下圖所示“閃爍”顽照，這個(gè)問題后來在 iOS 11 發(fā)布后，在 iOS 微信里也出現(xiàn)了闽寡，應(yīng)該是 WKWebview 做的“優(yōu)化”代兵。
我最近在 iPhone X 上遇到的問題時(shí)，當(dāng)頁面滾動(dòng)到底部時(shí)下隧，position: fixed的元素會(huì)被頂上去奢人。這里和一些 iPhone X 適配文章上說的bottom: 0仍距離底部有 34px 的空白、要設(shè)置viewport-fit=cover不一樣淆院，在我看來這里更像是 iOS 處理 fixed 元素的 bug.
(正常的.login)
(滾動(dòng)到頁面底部時(shí)何乎，.login顯示仍然靠在底部，但是實(shí)際元素被頂了上去土辩。用戶點(diǎn)擊事件也是選中的區(qū)域在響應(yīng)支救，這是不可接受的)
我的頁面會(huì)遇到這個(gè)問題是因?yàn)橥ㄟ^指定 viewport 寬度來實(shí)現(xiàn)頁面的響應(yīng)式適配，如下拷淘。
<meta name="viewport" content="width=321, user-scalable=no, viewport-fit=cover" />
這里應(yīng)該是 iOS 在處理 viewport 縮放和避讓 iPhone X 底部功能區(qū)域時(shí)各墨，出現(xiàn)了 bug.
這里有一個(gè) demo，可以使用 iPhone X 或 XCode 模擬器的 Safari 查看：
iPhone X reach bottom bug with viewport width?codepen.io
解決方案
解決方案不是很優(yōu)雅启涯，因?yàn)轫?xiàng)目本身已經(jīng)比較穩(wěn)定贬堵，影響頁面眾多，只能暫時(shí)針對(duì) iPhone X 進(jìn)行修復(fù)结洼。
當(dāng)動(dòng)態(tài)向頁面增加 fixed 蒙層時(shí)黎做，將主要內(nèi)容節(jié)點(diǎn)（一個(gè)很長的容器）改成position: absolute，計(jì)算內(nèi)容的scrollTop松忍，作為marginTop賦值給它蒸殿，以此實(shí)現(xiàn)用戶基本無感知后面的內(nèi)容頁面被改動(dòng)了（實(shí)際上在不同 webview 內(nèi)會(huì)有不同程度的一個(gè)閃爍）。
關(guān)閉蒙層的時(shí)候，再逆操作剛剛的步驟宏所，將“被截?cái)唷钡膬?nèi)容節(jié)點(diǎn)再還原酥艳。
更好的解決方案
更好的解決方案，即是如標(biāo)題所述爬骤，盡量避免在移動(dòng)端開發(fā)中使用position: fixed充石，而是更多使用更現(xiàn)代的布局方式和position: absolute來實(shí)現(xiàn)類似需求。
