이 경우 주요 부분이 왜 다시 칠합니까?

다음은 간단한 jsbin 예제입니다. http://jsbin.com/gusaditako/edit?html,css,output 이 경우 주요 부분이 왜 다시 칠합니까?

메뉴 항목 위로 마우스를 가져 가면 주요 부분이 왜 다시 그려지는지 설명 할 수 있습니까? (크롬 devtools에서 페인트가 깜박이는지 확인하십시오.)

내가 본 의사 :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에서 더 이상 주요 부분에 칠하고 ...

코드를 실행하지 않습니다

출처

2017-11-08 King Julien

나는 그것을하지 않습니다. 다시 칠 하다니 무슨 뜻이야? – Kushtrim

@Kushtrim chrome devtools에서 '그림판 깜박임'을 활성화하고 메뉴 항목 위로 마우스를 가져 가십시오. 녹색 영역은 호버 이벤트가 트리거 될 때마다 브라우저가 다시 칠하는 곳입니다. –

사용자 정의 글꼴을 사용하고 있는데 메뉴 항목 위로 마우스를 가져 가면 웹 사이트의 완전히 다른 영역에서 글꼴이 깜박입니다. –

음 Chrome은 내부적으로 주 콘텐츠에 영향을 미칠 수있는 새 요소를 삽입 할 때 내부 부품을 다시 페인트해야한다고 생각합니다. 한 가지 빠른 해결 방법은 사이드 바를 position:absolute;으로 설정하는 것입니다.

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

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

출처

2017-11-08 08:53:50

이 경우 주요 부분이 왜 다시 칠합니까?

답변

관련 문제