當使用 position: fixed 的元素脫離 viewport (視口) 時，主要會產生以下幾種 bug：
-
元素不可見或部分可見： 這是最常見的 bug。當頁面滾動導致 fixed 元素的父元素也被移出 viewport 時，fixed 元素可能會隨之不可見或只顯示部分內容。這是因為 fixed 定位是相對於 viewport 定位的，但如果它的祖先元素設定了
transform、perspective、filter等屬性，或者祖先元素本身就不是相對於文件根元素定位的，fixed 元素的定位就會受到影響。 -
定位錯誤： fixed 元素可能會定位到錯誤的位置，例如，它可能不再固定在預期的位置，而是隨著頁面滾動。這通常是由於祖先元素的 CSS 屬性干擾了 fixed 定位的計算。
-
z-index 失效： 即使設定了較高的
z-index值，fixed 元素也可能被其他元素遮擋。這通常是由於 stacking context (堆疊上下文) 的問題。 -
iOS 上的抖動或閃爍： 在 iOS 裝置上，當頁面滾動時，fixed 元素可能會出現抖動或閃爍的情況。這是 iOS 系統處理 fixed 定位的一個已知問題。
以下是幾種解決 fixed 定位脫離 viewport 產生的 bug 的方法：
-
檢查祖先元素： 仔細檢查 fixed 元素的所有祖先元素，看看是否有設定
transform、perspective、filter等屬性，或者祖先元素本身是否使用了除static以外的定位方式（relative,absolute,fixed）。如果有，嘗試移除這些屬性或更改定位方式，看看是否能解決問題。 如果無法移除，可以考慮將 fixed 元素移到 DOM 樹中更上層的位置，使其祖先元素不再影響其定位。 -
建立新的 stacking context： 為 fixed 元素的父元素新增以下屬性之一，建立一個新的 stacking context，可以解決 z-index 失效的問題：
position: relative; z-index: 0;(即使 z-index 為 0 也可以建立新的 stacking context)opacity: 0.99;(注意，這會使元素略微透明)transform: translateZ(0);filter: blur(0);will-change: transform;(這會提示瀏覽器對元素進行最佳化，但過度使用可能會降低效能)isolation: isolate;
-
使用
position: sticky;： 如果 fixed 元素只是需要在某個區域內固定，而在超出該區域後恢復正常的文件流，可以考慮使用position: sticky;。sticky定位結合了relative和fixed的特性，可以在元素到達某個閾值時將其固定，而在超出閾值後恢復正常滾動。 -
JavaScript 解決方案： 如果其他方法都無效，可以使用 JavaScript 來動態控制 fixed 元素的位置。監聽
scroll事件，並根據滾動位置手動調整 fixed 元素的位置。這種方法需要更多的程式碼，但可以更精細地控制元素的行為。 例如，可以使用window.pageYOffset獲取滾動距離，然後使用element.style.top或element.style.bottom來調整元素的位置。 -
iOS 相容性處理： 針對 iOS 裝置上的抖動或閃爍問題，可以嘗試以下方法：
-webkit-transform: translate3d(0,0,0);強制硬體加速。position: absolute;並結合 JavaScript 計算位置。
選擇哪種解決方案取決於具體的場景和需求。建議先嚐試最簡單的解決方案，例如檢查祖先元素和建立新的 stacking context，如果無效再考慮使用 JavaScript 或其他更復雜的方法。 記住，仔細檢查程式碼並進行測試是解決 bug 的關鍵。