解決網頁 Input 在 iOS 15 無法輸入？

最近在專案中遇到一個非常棘手的問題，網頁的的搜尋框（Input），在電腦版 Chrome、Safari 以及最新的 iOS 16+ 手機上都運作完美。唯獨客戶回報在 iOS 15 的舊 iPhone 上，這個輸入框完全無法使用。經過了問 AI 之後，終於解了，把這過程記錄下來。

這發生的原因很神奇，主是因為開發人員不希望其它區塊的文字被選取，於是加了一個「user-select：none」的屬性，但這樣就導致輸入框失效了。而這時我們稍微改一下 CSS 就好了。

以下是改過後的 CSS，SearchBar 是 input 的 id。

#SearchBar {
    /* 【Fix 1】強制允許選取，防止被全域 CSS Reset 鎖死 */
    -webkit-user-select: text !important;
    user-select: text !important;

    /* 【Fix 2】確保事件能穿透，防止被上層透明元素遮擋 */
    pointer-events: auto !important;

    /* 【Fix 3】關鍵！開啟 GPU 加速 */
    /* 這能強迫 iOS 15 重繪該區域，解決「有值但在畫面上看不見」的渲染 Bug */
    transform: translateZ(0);

    /* 【Fix 4】確保層級最高 */
    position: relative;
    z-index: 9999;
    opacity: 1;
}