為什麼在點擊 UL 連結時我的固定位置錨點在 Chrome 和 Opera 中消失？

Chrome 和Opera 渲染問題：固定位置錨點在正文中帶有UL

在某些瀏覽器（例如​​Chrome 和Opera）中，嘗試定位時可能會出現特殊的渲染問題UL 標籤旁的固定元素。此問題表現為固定元素在點擊錨連結後立即消失。

根本原因

此問題的根本原因歸因於這些瀏覽器在頁面上的元素更新時處理重繪的方式。具體來說，固定元素可能會在重新繪製過程中暫時失去其位置。

Chrome 解決方案

要在 Chrome 中解決此問題，您可以對有問題的固定元素套用 translateZ(0) 轉換。此操作有效地觸發 3D 轉換，將重繪過程與 CSS 堆疊的其餘部分隔離，從而緩解定位問題。

#sidebar {
    -webkit-transform: translateZ(0);
}

Opera 解

對於 Opera，略有不同的方法是必須的。在這種情況下，您可以建立一個 CSS 動畫，連續重新繪製影響佈局但不影響元素視覺外觀的屬性，例如 margin-bottom。這種方法愚弄 Opera 執行連續重繪，確保固定元素保持其位置。

@keyframes noop {
  0%   { margin-bottom: 0; }
  100% { margin-bottom: 1em; }
}

#sidebar {
    animation: noop 1s infinite;
}

注意

需要注意的是，此解決方案可能不是萬無一失的，並且可能會導致輕微的錯誤。當 Opera 嘗試重新獲得固定位置時閃爍。這種限制是 Opera 處理重畫過程的方式所固有的，因此很難完全消除視覺偽影。

以上是為什麼在點擊 UL 連結時我的固定位置錨點在 Chrome 和 Opera 中消失？的詳細內容。更多資訊請關注PHP中文網其他相關文章！