首頁>Program>source

使用以下代碼的Google Chrome和Opera(為什麼?=)存在渲染問题:

<html>
<style>
    #content {
        width: 150px;
        background: gray;
    }
    #sidebar {
        position: fixed;
        left: 200px;
        background: gray;
    }
</style>
<body>
    <div id="sidebar">
        <a href="#s1">Link #1</a><br/>
        <a href="#s2">Link #2</a>
    </div>
    <div id="content">
        <div id="s1">
            <a href="#s1">Link #1 TARGET</a>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
            sed do eiusmod tempor incididunt ut labore et dolore magna
            aliqua. Ut enim ad minim veniam, quis nostrud exercitation
            ullamco laboris nisi ut aliquip ex ea commodo consequat.
            Duis aute irure dolor in reprehenderit in voluptate velit
            esse cillum dolore eu fugiat nulla pariatur.
            Excepteur sint occaecat cupidatat non proident, sunt in culpa
            qui officia deserunt mollit anim id est laborum.</p>
        </div>
        <div id="s2">
            <a href="#s2">Link #2 TARGET</a>
            <ul>
                <li>Item 1</li>
                <li>Item 2</li>
            </ul>
        </div>
    </div>
    <a href="#">TOP</a>
</body>
</html>

如您所见,我正在尝試使右侧的邊欄變為靜態。 一切正常,直到您添加一些 <UL> 頁面上的標簽:

http://www.youtube.com/watch?v=zkhH6di2M0c

当我單击锚鏈接時,固定的div有時会開始消失。

如何避免這種行為?

最新回復
  • 5月前
    1 #

    Chrome解決方案:

    添加 -webkit-transform: translateZ(0)#sidebar 為我解決了這个問题。

    我用過 translateZ(0) 多年来修複了许多Chrome顯示錯誤.理由是通過呼叫3D轉換,重画与CSS痛苦堆棧的其餘部分分開了(我無法提供更多细节,這對我来說几乎就是希腊文).無論如何,它似乎對我有用!

       #sidebar {
            -webkit-transform: translateZ(0);
        }
    
    Opera解決方案:

    這不是通用解決方案(將根据相關元素的定位要求进行調整).它通過對可能影响佈局的屬性(通過CSS動画)強製进行连續重绘(通過CSS動画)(強製計算和渲染其他佈局因子,即保持固定的位置)而起作用,但實際上不起作用.在這種情况下,我使用了 margin-bottom ,因為這不会影响您的頁面佈局(但Opera不知道!):

    @keyframes noop {
      0%   { margin-bottom: 0; }
      100% { margin-bottom: 1em; }
    }
    #sidebar {
        animation: noop 1s infinite;
    }
    

    Note: 解決方案不是完美的,因為(至少在我的機器上)bug測試用例会匯致短暂的闪烁,因為Opera失去定位並迅速重绘.可悲的是,我认為這是您將得到的,因為正如George在他的迴答中所說,這是Opera在重绘之間的自然行為-理論上,我的代碼使元素的重绘是连續的,但實際上会有無限的差距. >

    EDIT 2 (2013-11-05) : 此後,我经常遇到此錯誤的變體.尽管原始發佈者的簡化測試用例顯示了一个完全合法的錯誤,但是大多數情况是在人體上已经存在3D變換(或類似地位於DOM樹上方)的情况下發生的.這通常用作強製GPU渲染的黑客手段,但實際上会匯致類似這樣的讨厌的重绘問题. 2種無操作的3D轉換並不正確:如果您在樹的上方使用一棵樹,請尝試先將其删除,然後再添加另一棵樹。

    EDIT 3 (2014-12-19) : 克裏斯報告說, translateZ(0) 在某些情况下無法正常工作

  • 5月前
    2 #

    Chrome的關键是:

    scale3d(1,1,1)
    

    通過添加此內容,應该解決固定位置問题。

  • 5月前
    3 #

    如果您了解文件的"正常流程"是如何工作的,這是有道理的.假設這是一个極端情况.

    在任何元素中都没有宣告高度,並且#wybar被 html, body {height:100%;overflow:auto}从文件的正常流程中删除

    如果將高度屬性添加到#sidebar(畫素,而不是百分比),則問题得以解決。

    我建議包括Normalize.css,我认為它將解決该錯誤.

    position:fixed

  • javascript:HTML5拖放到螢幕上的任意位置
  • asp.net:NET Framework 40中的TLS 12