以下是一些基於問題的標題，它們抓住了本文的精髓： 清晰簡潔： * 主體帶有 UL 的固定位置錨：為什麼它在 Chrome 和 Opera 中會損壞？ * 側邊欄消失

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

渲染問題描述

Google Chrome 和Opera出現渲染問題當在正文中實作具有固定位置側邊欄和無序列表(UL) 的程式碼。具體來說，點擊錨定連結後，側邊欄會立即消失。

Chrome 解決方案

要在Chrome 中解決此問題，請將以下CSS 屬性應用於側邊欄：

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

這會呼叫3D 轉換，將會重畫與其他CSS 操作分開並解決顯示錯誤。

Opera 解決方案

對於Opera，可以使用以下CSS 動畫強制連續重畫：

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

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

此解決方案迫使Opera 不斷計算和渲染佈局因素，儘管存在UL 元素，但仍保持側邊欄的固定位置。

注意

Opera 解決方案可能會導致重繪時會出現輕微閃爍。然而，這是目前此問題的最佳解決方案。

其他注意事項

當 DOM 樹上方存在 3D 變換時，也可能會出現此錯誤的變體。首先刪除此類轉換以防止此問題。

在某些情況下，可能需要應用scale3d(1,1,1) 而不是translateZ(0) 來解決Chrome 中的問題。

以上是以下是一些基於問題的標題，它們抓住了本文的精髓： 清晰簡潔： * 主體帶有 UL 的固定位置錨：為什麼它在 Chrome 和 Opera 中會損壞？ * 側邊欄消失的詳細內容。更多資訊請關注PHP中文網其他相關文章！