Safari又出bug了？臨時修復 iOS 26彈出鍵盤后定位錯亂問題
Safari真不愧是新時代的IE。由于 iOS 26最近發布，一下子把我的頁面搞亂了。
一、定位錯亂問題
比如這樣一個上下fixed定位布局；
<header>頭部</header>
<div class="list">
<div class="item"></div>
<input placeholder="請輸入">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<footer>底部</footer>相關樣式如下：
header{
position: fixed;
top: 0;
left:0;
right:0;
background: pink;
padding: 10px;
padding-top:padding-bottom: calc(env(safe-area-inset-top) + 10px);
}
footer{
position: fixed;
bottom: 0;
left:0;
right:0;
background: orange;
padding: 10px;
color: #fff;
padding-bottom: calc(env(safe-area-inset-bottom) + 10px)
}正常情況下沒什么問題，上下的吸頂（底）的。
image-20250921130022828
但是當呼出鍵盤后，再次滾動頁面，上下定位就出現了偏差。
image-20250921130227372
很明顯，上下本該貼近屏幕邊緣的fixed元素居然錯亂了，看著像是整體向上偏移了，導致頂部移出屏幕了，底部漏出一個縫隙。
如果大家手頭有iOS 26設備，可以訪問這個demo自己體驗一下。
https://xboxyan.codelabo.cn/source/ios26-bug/
或者直接掃碼體驗。
image-20250921130751857
為了驗證這個不是特例，特意去看了蘋果官網，只要有輸入框的，觸發以后也會出現這種現象（頂部的導航欄往上偏移了）
image-20250921131043993
目前在蘋果開發者平臺已經看到有相關反饋了，看看什么時候可以修復吧。
https://developer.apple.com/forums/thread/800125
那么，在蘋果修復之前，有什么辦法可以規避這個問題呢？
二、使用容器滾動來代替頁面滾動
其實在之前就有這種感覺，safari的頁面滾動很容易受到系統行為的影響，給人一種不可靠的感覺，每次系統更新都得看下當前頁面是否受影響。
這次的問題也是這樣，不知道蘋果的底層對webview做了什么特殊優化，導致鍵盤彈起后整體頁面布局出現了偏差。所以這里的解決方式就是使用容器滾動而不是默認的頁面滾動。
拿上面的例子來說，最簡單的方式是直接嵌套一層；
<div class="page">
</div>然后設置容器滾動；
html,body,.page {
margin: 0;
height: 100%;
}
.page {
overflow: auto;
overscroll-behavior: none; /*阻止默認滾動行為*/
}為了徹底消除系統滾動影響，還可以加上overscroll-behavior: none;，這個屬性可以阻止系統的默認滾動行為，比如iOS上的默認回彈效果，滾動聯動效果。
這樣這個頁面就只有容器滾動了，根本不會觸發頁面滾動那些亂七八糟的系統行為了。
你可以訪問這個demo。
https://xboxyan.codelabo.cn/source/ios26-bug/fix.html
或者直接掃碼體驗。
image-20250921133659301
這樣問題基本就解決了。
三、對現有頁面的影響
當然如果是一個已經存在的項目，僅僅以上改動還不夠，布局可能沒問題了，但是還有一些其他問題。比如有些邏輯是依賴頁面滾動的，比如上拉加載，可能之前是通過監聽頁面滾動實現的，這里要統一改成容器監聽。
window.addEventListener('scroll', () => {})
// 改為
document.getElementById('#app').addEventListener('scroll', () => {})然后滾動位置的獲取也要改變。
document.scrollingElement.scrollTop
//改為
document.getElementById('#app').scrollTop如果之前在寫這些計算邏輯時考慮到了滾動容器，那么這個改動適配就很輕松，否則就有點麻煩了。
四、iframe好像也行？
如果頁面要修改的地方太多了，各種滾動計算，或者依賴的第三方庫根本就不支持容器滾動，還可以試試iframe容器，結構很簡單。
<style>
html,body,iframe{
margin:0;
height: 100%;
width: 100%;
border:0;
overflow: hidden;
overscroll-behavior: none;
}
</style>
<body>
<iframe src="./index.html"></iframe>
</body>這樣就是一個最簡單的結構了，其實也相當于變相去掉了頁面滾動，iframe里的頁面滾動系統可不認。
你可以訪問這個demo。
https://xboxyan.codelabo.cn/source/ios26-bug/iframe.html
或者直接掃碼體驗。
image-20250921140816690
當然實際項目中可能還有各種參數，需要一一傳遞過來，然后還有iframe的性能一直是個問題，加載比較慢，適合一定要解決這個問題又不想大改的場景。
五、希望盡快修復吧
移動端80%的問題都來源于safari，真的是毫無辦法，別的不說了，盡快修復吧。
