」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > 為什麼在 Chrome 和 Opera 中點擊錨定連結時固定側邊欄會消失?

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

發佈於2024-11-09
瀏覽:597

Why Do Fixed Sidebars Disappear When Clicking on Anchor Links in Chrome and Opera?

修復了Google Chrome 和Opera 中錨點和UL 列表的定位問題

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

    元素會加劇此問題。

    Chrome 解決方案

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

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

Opera 解

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

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

#sidebar {
    animation: noop 1s infinite;
}

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

其他注意事項

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

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

最新教學 更多>

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3