修正了Chrome 中元素消失的問題
使用position:fixed實現固定導覽列時,開發者可能會遇到元素偶爾消失的問題在Chrome 中。此問題可能表現為活動導航項目部分或完全不可見。
原因和解決方案
此問題是由 Chrome 渲染引擎中的一個怪癖引起的,特別是對於top: 0 的元素。要解決此問題,請將以下CSS 規則加入固定元素:
<code class="css">-webkit-transform: translateZ(0)</code>
說明
此規則強制Chrome 使用硬體加速連續繪製固定元素,繞繞繞過渲染問題。透過套用 3D 轉換,瀏覽器的圖形處理器 (GPU) 會參與進來,確保元素即使在頁面轉換和元素互動期間也保持可見。
其他資訊
報告的問題影響 top: 0 的元素,但不影響 Bottom: 0 的元素。這表示該問題與 Chrome 處理視窗頂部附近元素的方式有關。
暫時修復
在等待 Chrome 的永久修復時,使用 Bottom:0 作為固定元素可以提供解決方法。
回報問題
為了提高對此問題的認識,已提交Chrome 錯誤:https://bugs.chromium.org/p/chromium/issues/detail ?id=288747。用戶可以透過加註星標此錯誤來優先解決其問題。
以上是為什麼我的固定導覽列在 Chrome 中消失了?的詳細內容。更多資訊請關注PHP中文網其他相關文章!