この場合、メイン部分はなぜ再描画されますか？ここ

Question

はシンプルjsbin例です：メニュー項目の上にマウスを移動するときのメイン部分が再描画されている理由http://jsbin.com/gusaditako/edit?html,css,output

は、誰もが説明できますか？ （chrome devtoolsからPaintを点滅させて確認してください）。

私は擬似を参照してください:beforeセレクタは非難するが、正確に理由を把握することはできません。

HTML：：

<div id="sidebar"> 
    <ul id="menu"> 
     <li>Item 1</li> 
     <li>Item 2</li> 
     <li>Item 3</li> 
    </ul> 
    </div> 

    <div id="main">Main part. Why does this repaint on menu hover?</div> 

CSS：

ul { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 

#sidebar { 
    width: 200px; 
    float: left; 
    background-color: lightgreen; 
} 

#main { 
    margin-left: 200px; 
    width: 500px; 
} 

ul#menu li { 
    height: 30px; 
    line-height: 30px; 
    padding-left: 20px; 
    position: relative; 
} 

ul#menu li:hover { 
    background-color: lightblue; 
} 

ul#menu li:hover:before { 
    content: ""; 
    width: 4px; 
    background-color: red; 
    position: absolute; 
    left: 0; 
    top: 0; 
    height: 100%; 
} 

あなたが最後 ul#menu li:hover:beforeの部分を削除した場合には、上記jsbinからもう主要部分の再描画...

コードをトリガしません。

Answer 1

まあ、Chromeは内部的に、メインのコンテンツに影響を与える可能性のある新しい要素を挿入しているときに、正しい部分を再描画する必要があると考えています。 1つの簡単な修正は、サイドバー全体をposition:absolute;に設定することです。

#sidebar { 
    position: absolute; 
    width: 200px; 
    float: left; 
    background-color: lightgreen; 
} 

http://jsbin.com/lilusajufe/4/edit?html,css,output