更新了 iOS 26 Safari 之後，打開網頁直呼 WTF
2025年的 WWDC 發表後，又進入一個新的紀元，整個系統 UI 又有全新的 Liquid Glass 設計，讓大家瘋狂的研究和批判。
還有所有系統的版本號大改，iOS 18 的下一代變成 iOS 26，變成年份的概念，其他的也統一變成 26，例如 macOS Tahoe 26, iPadOS 26, watchOS 26, tvOS 26 和 visionOS 26。
但本文沒有要來探討如何在網頁前端模仿出 Liquid Glass 特效，也沒有要列清單恭賀 Safari 終於支援哪些 Google Chrome 老早就支援的 CSS 或 JS 玩意，只是單純來看 Safari 又有什麼奇怪的變化，可能會對現有的網頁設計造成困擾。
iOS26，但是 UserAgent 字串還是有 19
比較一下 iOS 18、iOS 26、iPadOS 26 的 UserAgent 字串，發現 26 跟 19 共存。
- Mozilla/5.0 (iPhone; CPU iPhone OS 18_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.5 Mobile/15E148 Safari/604.1
- Mozilla/5.0 (iPhone; CPU iPhone OS 19_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.0 Mobile/15E148 Safari/604.1
懸浮工具列捲土重來
記得當年 WWDC2021 發表 iOS 15，第一個開發者測試版的 iOS15 Safari 介面大改版，網址列可以設定在下面，而且還懸在半空，令人嘖嘖稱奇。(如下圖)
結果 iOS 15 的正式版發布之後，那個設計被改掉了，Safari 工具列沒有懸在半空，而是跟螢幕同寬乖乖貼在上緣或下緣，大家擔心的問題都不是問題。
結果在 iOS 26，這種懸浮工具列又捲土重來，跟 Liquid Glass 結合之後，還變本加厲變得更干擾網頁本體內容的呈現，每次網頁內容滑到那塊玻璃內容時，特別愛看會被折射成什麼樣子，就好像一些電腦遊戲玩家，換新顯卡的時候會把特效開到最高，在熟悉的場景跑來跑去看看有什麼不一樣?
儘管變化很大，不過我在 iOS26 Developer Beta1~Beta4 期間都按兵不動，等到 7 月底這禮拜 Public Beta 發佈之後再來批判。
這次 iOS 26 手機上有三種工具列樣式(如下圖)，精簡/下方/上方，到 public beta 還是長這樣，看來這個 Safari UI 設計真的是勢在必行了。
謎之空隙
要做一個網頁捲動時會一直固定黏在上面的選單，其中一種方法是設定 CSS 樣式 position:fixed;top:0;。
但是在之前的 iPadOS Beta 版本 Safari，顯示區域的最上面會多出一條奇怪的縫，就是無法貼齊瀏覽器的顯示區域(如圖上半部)。
難道這個縫隙又代表了什麼 Apple 的設計理念?
結果 Beta 4 版本終於把這個現象修掉了(如上圖的下半部)，顯示效果還是跟預期一樣乖乖貼齊上緣，又可以把藍色窗簾收進櫥櫃。從 iOS & iPadOS 26 Beta 4 Release Notes 或是 Safari 26.0 Beta Release Notes 似乎都沒發現這個問題是屬於哪一條。
另一個更可怕的問題從 Beta1 一直留到現在，但官方論壇或是網路上都沒看到特別多人在討論。問題是由於懸浮工具列的概念，iOS Safari 網頁背景色跟內容竟然延伸到螢幕上下緣了!
上下緣的內容還會自動模糊處理，但是頁面上設定與螢幕同高的元素，卻沒辦法延伸到螢幕邊緣的那個地方，如下圖，假設我們做出一個高度寬度滿版的網頁選單，但最上緣跟最下緣會有一大段空隙，透出本來網頁的內容，網頁選單蓋不住他們。
嘗試各種 CSS 的 vh/lvh/dvh unit、-webkit-fill-available、各種 JS 高度、viewport-fit=cover，上下緣永遠會留一塊空隙。
除了上下部分會「走光」，還有某些設計以前看起來好好的，在 iOS26 看起來會變得怪怪的，例如:
左上角放一個 logo，在新版 iOS 26 Safari 中，變成 logo 飄在半空中，沒有貼齊最上面。logo 是圓形的就還好，某些特殊形狀會特別不順眼。
有些網頁下緣可能會放一些小按鈕，同樣也有機會發生類似的問題。
舉兩個網路上看到的網站，左邊網站的底部按鈕(日常經典)做成膠囊型的，看起來很自然；右邊的就就剛好踩到 iOS 26 的雷，比較有那種按鈕卡在半空中的感覺。
只有在直立螢幕時才會出現，而當手機螢幕橫置時，工具列會通通跑到上面去，然後上半部一樣有一條走光。
自動變色的上下空白區域
從上述的生態觀察發現，這空隙引發一些網頁設計的問題，問題可大可小，要是客人說等這個處理完才能請款，那可是天大的問題。那這段來探討這螢幕上下的奇怪空隙，竟然是會自動變色的，以及有什麼方式去控制它的顏色。
上圖是自動變色的問題之一，以常見的電商開店平台為例，側邊選單打開後，在舊版 iOS Safari (圖右)上面看起來沒什麼特別的事故。
但是在圖左的 iOS 26 Safari，可能因為選單打開時網頁會蓋一層黑色遮罩，系統認定那個黑色，把瀏覽器最底下的那塊空隙區域自動變成黑色的，看起來不太順眼，到時候網站業績不好時就準備背黑鍋。
用 meta theme color 也沒讓空隙填滿想要的顏色，繼續嘗試其他方法，做了一個測試頁面，看看上下兩邊在何時會自動變色?
可以發現一開始空隙都是透明的，但是在底度和頂部的物件面積逐漸變大之後，空隙會自己變色。
如影片 PART1，當那個物件是漸層色或是其他背景屬性，空隙顏色就會變成白色。
如影片 PART2，如果那個物件是單色的，空隙顏色就會跟著變成那個顏色。
ps.本來要用 iPhone 鏡像輸出(mirroring)來錄，但是發現按數字的時候畫面會 lag，變動不夠即時，只能直接用螢幕錄影。
所以網頁上下方區塊，設計上考慮用一些保守、整條填滿顏色的，不要加漸層色，不要有特殊形狀的東西，這樣起碼底色還會自動延伸到上下區域。避免網頁在之前的系統好好的，使用者升級 iOS 26 之後，logo 或底部按鈕卡在半空中，上下多出一大片空白的情況。
iPad Safari 的數字獨立小鍵盤
iPadOS 26 有一些讓人用起來更像 macOS 的新功能，像是可以更自由調整網頁視窗大小和視窗位置，視窗左上角有紅黃綠控制按鈕，螢幕最上面往下滑可以叫出一排檔案、編輯、顯示方式、瀏覽紀錄、書籤...的選單列。截圖丟給 ChatGPT，搞不好還會誤認為是 macOS。
雖然系統 UI 風格大改，但是網頁原生的表單物件倒是沒有這麼激烈的變動，至少大部分還是熟悉的樣子。
(上圖) select 的選單分隔線不見了，點開時直接顯示的項目數量也少了很多，以後說「不知道下面還有選項」的使用者可能要變多了。
(上圖) 最驚喜的是 input type=number 的數字鍵盤不再是展開全尺寸鍵盤，而是有個獨立的小鍵盤。雖然要加上 inputmode="decimal" 或 inputmode="numeric" 才會出現，但記得之前 iPadOS Safari 好像沒有這種效果。
總結
從懸浮的 Safari 工具列到自動變色的上下縫隙，iOS 26 Safari 彷彿在跟網頁設計師玩捉迷藏。Logo 跟按鈕卡在半空中、選單蓋不住背景內容，作為慘業工作人員，我們早已習慣 Apple 每年的「驚喜」，你有沒有在 iOS 26 中發現其他詭異的問題？快來分享你的經驗，或者告訴我們你是怎麼搞定這些問題的！
這些改變多半是不會促進經濟發展的，可能都只會被當成網頁顯示不正常，工作人員要免費維修處理。
至於 Apple Intelligence 喊了一年，本機 AI 的概念是很好，但什麼時候開放給台灣? 我也不知道。
近期還有一個值得一提的，有些人會主張中英文混排的文章段落，中文跟英文中間要加空格。網頁瀏覽器不是刊物排版工具，以前要人工手動加空白。
如今 iOS 18.4 的 Safari、Google Chrome 140 開始都開始支援 CSS 的 text-autospace，但這個效果不會強制套用，必須要網頁開發人員加上 text-autospace: normal 才會生效，iOS 19...呃 iOS 26 當然也是支援的。
但我是不打算加的，因為本來的文章段落中，已經手動在中文和英文中間加了空白，有時候還常常漏掉，處理起來也挺花時間的，給 AI 處理還怕 AI 亂改。