변경 이유 : 불투명도가 고정 된 요소를 변경하는 것보다 다르게 처리합니다. 크롬에서 변환?

Question

내 웹 앱의 스크롤을 최적화하려고합니다. 나는 많은 데이터를 가진 데이터 테이블을 가지고 있으며, 스크롤은 꽤 나 빠진다. 나는 데이터 테이블에 will-change: transform을 추가했지만 position: fixed 인 테이블 헤더를 부러 뜨 렸습니다 (뷰포트로 스크롤 할 수 있도록 수정했습니다). 요소는 뷰포트와 함께 전혀 움직이지 않으며, 문서의 흐름에 갇혀 있습니다.

하지만 우연히 내가 will-change:opacity을 사용하면 내 고정 헤더가 괜찮음을 발견했습니다. 누군가이 행동을 설명 할 수 있습니까? 나는 그들이 다르게 행동해야한다고 말하는 문서를 찾을 수 없었습니다.

여기 내가 말하는 것에 대한 예를 든 코드 펜입니다. 값 사이를 전환하고 파란색 div에서 스크롤합니다. 여기 https://codepen.io/bkfarns/pen/aLYgrN

도 펜의 기본 코드입니다 :

HTML :

CSS

<div class="container"> 
    <div class="fixed">should be position: fixed</div> 
    <div class="too-tall">div that is too tall</div> 
    </div> 

:

이

.container { 
    margin-left: 100px; 
    background-color: blue; 
    width:400px; 
    height:300px; 
    overflow: auto; 
    will-change: transform;//changing this to opacity fixes the issue 
} 

.fixed { 
    background-color: grey; 
    position: fixed; 
    margin-left: 150px; 
    margin-top: 100px; 
} 

.too-tall { 
    background-color: red; 
    width: 90px; 
    height: 600px; 
} 

Answer 1

will-change의 요점은 가능한 모든 변경을하는 것입니다 지정된 속성이 미리 변경 될 때 브라우저가 적용되어야 변경 자체에 필요한 시간이 단축됩니다. 효과적으로 will-change:transform을 지정하면 요소가 변형되지만 (시각적으로는 같은 위치에 있지만) 변형 된 요소의 자손은 CSS Transforms spec에 따라 고정 될 수 없습니다. 불투명도에는 영향이 없으므로 will-change:opacity 고정 위치가 깨지지 않습니다.

또한 will-change 그 자체에는 "최적화 마법"이 없으며 지정된 속성의 변경 사항 만 최적화됩니다. 일부 속성은 이론적으로 GPU에서보다 효율적으로 처리 할 수있는 요소를 복합 레이어에 강제로 적용하지만 요소가 너무 많으면 반대 효과가 발생할 수 있습니다. 스크롤을 최적화하려면 아마도 other strategies이 더 효율적일 것입니다.