為什麼在 Chrome 和 Opera 中點擊錨定連結時固定側邊欄會消失？

修正了Google Chrome 和Opera 中錨點和UL 清單的定位問題

本文解決了在Google Chrome 和Opera 瀏覽器中觀察到的渲染問題點擊頁面內的錨定連結時，固定位置側邊欄可能會消失。

的存在是必要的。頁面上的元素加劇了此問題。

Chrome 解決方案

將 -webkit-transform:translateZ(0) 屬性應用於固定側邊欄元素可以解決 Chrome 中的此問題。該技術在進行 3D 轉換時利用了重繪和 CSS 渲染的分離，從而減輕了顯示故障。

<code class="css">#sidebar {
    -webkit-transform: translateZ(0);
}</code>

Opera 解決方案

在 Opera 中解決此問題需要不同的方法。我們使用 @keyframes 動畫來強迫對影響佈局但對頁面外觀沒有實際影響的 CSS 屬性進行連續重繪。在本例中，我們對 margin-bottom 屬性進行動畫處理：

<code class="css">@keyframes noop {
  0%   { margin-bottom: 0; }
  100% { margin-bottom: 1em; }
}

#sidebar {
    animation: noop 1s infinite;
}</code>

值得注意的是，此解決方案並非完美無缺。在某些情況下，當側邊欄失去定位並快速重繪時，可能會出現短暫的閃爍。 Opera 重繪之間的內在行為是造成此問題的原因。

其他注意事項

在已應用 3D 變換的情況下，後續遇到的此錯誤已被證明經常發生主體或父元素。這種做法通常用於強制 GPU 渲染，但可能會導致持續的渲染問題。在實施上述解決方案之前，請考慮刪除現有的 3D 變換。

Google Chrome 和 Opera 現在可以處理固定定位，並提高穩定性。這些修復已證明可以有效解決與在頁面上使用 UL 元素相關的渲染問題。

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